201206030/novel
1
0
Fork 0
mirror of https://github.com/201206030/novel.git synced 2025-06-24 08:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

增加漫画弹幕

Browse Source
This commit is contained in:
xxy
2019-12-01 12:04:21 +08:00
parent 7bf7db85e9
commit 2b8eb63836
4 changed files with 321 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
novel-front/src/main/resources/application.yml
View File

@ -14,7 +14,7 @@ spring:
config: classpath:ehcache.xml
thymeleaf:
mode: LEGACYHTML5 #去除thymeleaf的html严格校验thymeleaf.mode=LEGACYHTML5
cache: true # 是否开启模板缓存，默认true,建议在开发时关闭缓存,不然没法看到实时
cache: false # 是否开启模板缓存，默认true,建议在开发时关闭缓存,不然没法看到实时
freemarker:
template-loader-path: classpath:/templates #设定freemarker文件路径 默认为src/main/resources/templatestemplate-loader-path=classpath:/templates
charset: UTF-8 # 模板编码

436
novel-front/src/main/resources/templates/books/book_content.html
View File

@ -1,6 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -41,6 +39,201 @@
}
window.setInterval("reinitIframe()", 200);
</script>
<script th:fragment="js" src="/js/jquery-1.9.1.js"></script>
<script th:fragment="js" src="/layui/layui.all.js"></script>
</div>
<script>
var isShowKey = "isShowKey";
// 弹幕定时器
var timers = [];
function showOrHiddenBullet() {
var isShow = eval(localStorage.getItem(isShowKey));//eval方法动态将参数运算成一个字符串,然后自动判断了字符串的类型,true被认为是boolean类型的变量.javascript的弱类型机制.通过eval运算可以动态获取运算后参数的类型.
if (isShow) {
$(".bullet").css("display", "none");
$(".screen_toolbar").css("display", "none");
$("[lay-skin='_switch']").removeClass("layui-form-onswitch");
localStorage.setItem(isShowKey, false);
$(".bullet").remove();
setTimeout(function () {
$(".bullet").remove();
},1000)
} else {
$(".bullet").css("display", "block");
$(".screen_toolbar").css("display", "block");
$("[lay-skin='_switch']").addClass("layui-form-onswitch");
localStorage.setItem(isShowKey, true);
loadBullet();
}
}
// 新建一个弹幕
function createScreenbullet(text) {
var jqueryDom = $("<div class='bullet'>" + text + "</div>");
var fontColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random()) + ")";
var fontSize = Math.floor((Math.random() + 1) * 18) + "px";
var left = $(".screen_container").width() + "px";
var windowHeight = $(window).height();
var top = windowHeight/2 + Math.floor(Math.random() * (windowHeight/2-100));
//top = parseInt(top) > windowHeight - 100 ? (windowHeight - 100) + "px" : top + "px";
jqueryDom.css({
"position": 'fixed',
"color": fontColor,
"font-size": fontSize,
"left": left,
"top": top
});
$(".screen_container").append(jqueryDom);
return jqueryDom;
}
// 为弹幕添加定时任务
function addInterval(jqueryDom) {
var left = jqueryDom.offset().left - $(".screen_container").offset().left;
var timer = setInterval(function () {
left--;
jqueryDom.css("left", left + "px");
if (jqueryDom.offset().left + jqueryDom.width() < $(".screen_container").offset().left) {
jqueryDom.remove();
clearInterval(timer);
}
}, 10);
timers.push(timer);
}
function loadBullet() {
var contentId = $("#contentIdHidden").val();
$.ajax({
type: "POST",
url: "/book/queryBullet",
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {contentId: contentId},
dataType: "json",
success: function (data) {
var lastCreateTime ;
var currentCreateTime;
var i = 0;
var sllepTime = 0;
if(data.length>0){
var schedule = setInterval(function () {
if(!eval(localStorage.getItem(isShowKey))){
clearInterval(schedule);
}
if(data.length>i) {
currentCreateTime = new Date(data[i].createTime).getTime();
if (lastCreateTime && currentCreateTime - lastCreateTime > 60000 && sllepTime <= 3000) {
if (sllepTime == 3000) {
lastCreateTime = currentCreateTime;
}
sllepTime += 3000;
} else {
sllepTime = 0;
var bullet = data[i].screenBullet;
// 创建弹幕
var jqueryDom = createScreenbullet(bullet);
// 添加定时任务
addInterval(jqueryDom);
i++;
lastCreateTime = currentCreateTime;
}
}
}, 1000);
}
console.log(data);
},
error: function (e) {
console.log(e);
layer.alert("加载弹幕失败");
return;
}
});
}
$(function () {
// 控制弹幕显隐变量
//监听键盘事件
$("#screenBulletText").keypress(function (even) {
if (even.which == 13) {
//enter键按下
sendBullet();
}
});
// 监听发送按钮
$(".send").on("click", function () {
sendBullet();
});
// 监听关闭弹幕按钮
$("[lay-skin='_switch']").click(function () {
showOrHiddenBullet();
});
var isShow = eval(localStorage.getItem(isShowKey));
if(isShow == undefined){
isShow = true;//第一次使用，默认开启屏幕
layer.open({
content: '是否需要关闭小说弹幕，之后可通过右下角开关打开！'
,btn: ['是', '否']
,btn1: function(index, layero){
showOrHiddenBullet();
layer.close(index);
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
localStorage.setItem(isShowKey, !isShow);
showOrHiddenBullet();
});
function sleep(n) {
var start = new Date().getTime();
while(true) if(new Date().getTime()-start > n) break;
}
//发送弹幕
function sendBullet(){
var bullet = $("#screenBulletText").val();
var contentId = $("#contentIdHidden").val();
if (bullet && contentId) {
$.ajax({
type: "POST",
url: "/book/sendBullet",
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {contentId: contentId, bullet: bullet},
dataType: "json",
success: function (data) {
console.log(data);
var bullet = $("#screenBulletText").val("")
},
error: function (e) {
console.log(e);
layer.alert("发送失败");
return;
}
});
} else {
layer.alert("发送内容不能为空");
return;
}
// 创建弹幕
var jqueryDom = createScreenbullet(bullet);
// 添加定时任务
addInterval(jqueryDom);
}
</script>
<style type="text/css">
.line-limit-length {
@ -168,7 +361,7 @@
position: fixed;
width: 100%;
left: 0px;
bottom: 110px;
bottom: 50px;
text-align: center;
}
@ -209,6 +402,27 @@
<a th:href="'/book/'+${bookContent.bookId}+'/index.html'">目录</a>
<a th:href="'/book/'+${bookContent.bookId}+'/'+${nextIndexNum}+'.html'">下一章</a>
</div>
<div id="screenInput" class="screen_toolbar" style="display: none">
<div style="height: 5px" class="layui-col-xs2 layui-col-sm3 layui-col-md3 layui-col-lg3"></div>
<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 layui-col-lg4">
<input type="text" id="screenBulletText" required lay-verify="required" placeholder="请输入弹幕内容,右下角开关可控制弹幕是否开启" autocomplete="off"
class="layui-input">
</div>
<div class="layui-col-xs2 layui-col-sm1 layui-col-md1 layui-col-lg1">
<button class="layui-btn send">发送</button>
</div>
</div>
<form id="screenSwitch" class="layui-form">
<div class="layui-form-item" style="position: fixed;right: 0px;bottom: 100px" title="弹幕开关">
<!-- <label class="layui-form-label" style="opacity:0.5;font-weight: bold;color: red;">弹幕</label>-->
<div class="layui-input-block">
<input class="clear" type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
</form>
<div th:replace="common/js :: js">
</div>
<div id="chaptercontent" class="Readarea ReadAjax_content screen_container"
style="color: rgb(0, 0, 0); font-size: 25px;">
<p style="width:100%;text-alight:center; overflow: auto;-webkit-overflow-scrolling:touch;" >&nbsp;&nbsp;&nbsp;&nbsp;
@ -223,33 +437,15 @@
</div>
<div id="screenInput" class="screen_toolbar" style="display: none">
<div style="height: 5px" class="layui-col-xs2 layui-col-sm3 layui-col-md3 layui-col-lg3"></div>
<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 layui-col-lg4">
<input type="text" id="screenBulletText" required lay-verify="required" placeholder="请输入弹幕内容,右下角开关可控制弹幕是否开启" autocomplete="off"
class="layui-input">
</div>
<div class="layui-col-xs2 layui-col-sm1 layui-col-md1 layui-col-lg1">
<button class="layui-btn send">发送</button>
</div>
</div>
<form id="screenSwitch" class="layui-form">
<div class="layui-form-item" style="position: fixed;right: 0px;bottom: 100px" title="弹幕开关">
<!-- <label class="layui-form-label" style="opacity:0.5;font-weight: bold;color: red;">弹幕</label>-->
<div class="layui-input-block">
<input class="clear" type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
</form>
<div th:replace="common/footer :: footer">
</div>
<a name="buttom"></a>
</body>
<div th:replace="common/js :: js">
</div>
<script>
var ua = navigator.userAgent;
@ -316,200 +512,6 @@
}
var isShowKey = "isShowKey";
// 弹幕定时器
var timers = [];
// 控制弹幕显隐变量
//监听键盘事件
$("#screenBulletText").keypress(function (even) {
if (even.which == 13) {
//enter键按下
sendBullet();
}
});
// 监听发送按钮
$(".send").on("click", function () {
sendBullet();
});
// 监听关闭弹幕按钮
$("[lay-skin='_switch']").click(function () {
showOrHiddenBullet();
});
function showOrHiddenBullet() {
var isShow = eval(localStorage.getItem(isShowKey));//eval方法动态将参数运算成一个字符串,然后自动判断了字符串的类型,true被认为是boolean类型的变量.javascript的弱类型机制.通过eval运算可以动态获取运算后参数的类型.
if (isShow) {
$(".bullet").css("display", "none");
$(".screen_toolbar").css("display", "none");
$("[lay-skin='_switch']").removeClass("layui-form-onswitch");
localStorage.setItem(isShowKey, false);
$(".bullet").remove();
setTimeout(function () {
$(".bullet").remove();
},1000)
} else {
$(".bullet").css("display", "block");
$(".screen_toolbar").css("display", "block");
$("[lay-skin='_switch']").addClass("layui-form-onswitch");
localStorage.setItem(isShowKey, true);
loadBullet();
}
if(isMobile){
$("#screenInput").css("display","none");
}
}
// 新建一个弹幕
function createScreenbullet(text) {
var jqueryDom = $("<div class='bullet'>" + text + "</div>");
var fontColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random()) + ")";
var fontSize = Math.floor((Math.random() + 1) * 18) + "px";
var left = $(".screen_container").width() + "px";
var windowHeight = $(window).height();
var top = windowHeight/2 + Math.floor(Math.random() * (windowHeight/2-100));
//top = parseInt(top) > windowHeight - 100 ? (windowHeight - 100) + "px" : top + "px";
jqueryDom.css({
"position": 'fixed',
"color": fontColor,
"font-size": fontSize,
"left": left,
"top": top
});
$(".screen_container").append(jqueryDom);
return jqueryDom;
}
// 为弹幕添加定时任务
function addInterval(jqueryDom) {
var left = jqueryDom.offset().left - $(".screen_container").offset().left;
var timer = setInterval(function () {
left--;
jqueryDom.css("left", left + "px");
if (jqueryDom.offset().left + jqueryDom.width() < $(".screen_container").offset().left) {
jqueryDom.remove();
clearInterval(timer);
}
}, 10);
timers.push(timer);
}
function loadBullet() {
var contentId = $("#contentIdHidden").val();
$.ajax({
type: "POST",
url: "/book/queryBullet",
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {contentId: contentId},
dataType: "json",
success: function (data) {
var lastCreateTime ;
var currentCreateTime;
var i = 0;
var sllepTime = 0;
if(data.length>0){
var schedule = setInterval(function () {
if(!eval(localStorage.getItem(isShowKey))){
clearInterval(schedule);
}
if(data.length>i) {
currentCreateTime = new Date(data[i].createTime).getTime();
if (lastCreateTime && currentCreateTime - lastCreateTime > 60000 && sllepTime <= 3000) {
if (sllepTime == 3000) {
lastCreateTime = currentCreateTime;
}
sllepTime += 3000;
} else {
sllepTime = 0;
var bullet = data[i].screenBullet;
// 创建弹幕
var jqueryDom = createScreenbullet(bullet);
// 添加定时任务
addInterval(jqueryDom);
i++;
lastCreateTime = currentCreateTime;
}
}
}, 1000);
}
console.log(data);
},
error: function (e) {
console.log(e);
layer.alert("加载弹幕失败");
return;
}
});
}
$(function () {
var isShow = eval(localStorage.getItem(isShowKey));
if(isShow == undefined){
isShow = true;//第一次使用，默认开启屏幕
layer.open({
content: '是否需要关闭小说弹幕，之后可通过右下角开关打开！'
,btn: ['是', '否']
,btn1: function(index, layero){
showOrHiddenBullet();
layer.close(index);
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
localStorage.setItem(isShowKey, !isShow);
showOrHiddenBullet();
});
function sleep(n) {
var start = new Date().getTime();
while(true) if(new Date().getTime()-start > n) break;
}
//发送弹幕
function sendBullet(){
var bullet = $("#screenBulletText").val();
var contentId = $("#contentIdHidden").val();
if (bullet && contentId) {
$.ajax({
type: "POST",
url: "/book/sendBullet",
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {contentId: contentId, bullet: bullet},
dataType: "json",
success: function (data) {
console.log(data);
var bullet = $("#screenBulletText").val("")
},
error: function (e) {
console.log(e);
layer.alert("发送失败");
return;
}
});
} else {
layer.alert("发送内容不能为空");
return;
}
// 创建弹幕
var jqueryDom = createScreenbullet(bullet);
// 添加定时任务
addInterval(jqueryDom);
}
</script>

2
novel-front/src/main/resources/templates/books/book_detail.html
View File

@ -1,6 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">