mirror of
https://github.com/201206030/novel.git
synced 2025-04-27 07:30:50 +00:00
增加漫画弹幕
This commit is contained in:
xxy
parent
7bf7db85e9
commit
2b8eb63836
@ -5,4 +5,105 @@
|
||||
<configuration />
|
||||
</facet>
|
||||
</component>
|
||||
<component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_8">
|
||||
<output url="file://$MODULE_DIR$/target/classes" />
|
||||
<output-test url="file://$MODULE_DIR$/target/test-classes" />
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/test/java" isTestSource="true" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/target" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-web:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-autoconfigure:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-logging:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: ch.qos.logback:logback-classic:1.2.3" level="project" />
|
||||
<orderEntry type="library" name="Maven: ch.qos.logback:logback-core:1.2.3" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.logging.log4j:log4j-to-slf4j:2.10.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.logging.log4j:log4j-api:2.10.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.slf4j:jul-to-slf4j:1.7.25" level="project" />
|
||||
<orderEntry type="library" name="Maven: javax.annotation:javax.annotation-api:1.3.2" level="project" />
|
||||
<orderEntry type="library" scope="RUNTIME" name="Maven: org.yaml:snakeyaml:1.19" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-json:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-databind:2.9.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-annotations:2.9.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-core:2.9.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.datatype:jackson-datatype-jdk8:2.9.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.datatype:jackson-datatype-jsr310:2.9.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.module:jackson-module-parameter-names:2.9.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-tomcat:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-core:8.5.29" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-el:8.5.29" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-websocket:8.5.29" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.hibernate.validator:hibernate-validator:6.0.9.Final" level="project" />
|
||||
<orderEntry type="library" name="Maven: javax.validation:validation-api:2.0.1.Final" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jboss.logging:jboss-logging:3.3.2.Final" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml:classmate:1.3.4" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-web:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-beans:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-webmvc:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-aop:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-expression:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.springframework.boot:spring-boot-starter-test:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.springframework.boot:spring-boot-test:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.springframework.boot:spring-boot-test-autoconfigure:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: com.jayway.jsonpath:json-path:2.4.0" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: net.minidev:json-smart:2.3" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: net.minidev:accessors-smart:1.2" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.ow2.asm:asm:5.0.4" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: junit:junit:4.12" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.assertj:assertj-core:3.9.1" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.mockito:mockito-core:2.15.0" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: net.bytebuddy:byte-buddy:1.7.11" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: net.bytebuddy:byte-buddy-agent:1.7.11" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.objenesis:objenesis:2.6" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.hamcrest:hamcrest-core:1.3" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.hamcrest:hamcrest-library:1.3" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.skyscreamer:jsonassert:1.5.0" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: com.vaadin.external.google:android-json:0.0.20131108.vaadin1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-core:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-jcl:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.springframework:spring-test:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" scope="TEST" name="Maven: org.xmlunit:xmlunit-core:2.5.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-cache:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-context:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-context-support:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: net.sf.ehcache:ehcache:2.10.4" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.slf4j:slf4j-api:1.7.25" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-thymeleaf:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.thymeleaf:thymeleaf-spring5:3.0.9.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.thymeleaf:thymeleaf:3.0.9.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.attoparser:attoparser:2.0.4.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.unbescape:unbescape:1.1.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.thymeleaf.extras:thymeleaf-extras-java8time:3.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.github.pagehelper:pagehelper-spring-boot-starter:1.2.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.github.pagehelper:pagehelper-spring-boot-autoconfigure:1.2.5" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.github.pagehelper:pagehelper:5.1.4" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.github.jsqlparser:jsqlparser:1.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.cuisongliu:orderbyhelper-spring-boot-starter:1.0.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.cuisongliu:orderbyhelper-spring-boot-autoconfigure:1.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: tk.mybatis:orderby-helper:0.0.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: mysql:mysql-connector-java:8.0.11" level="project" />
|
||||
<orderEntry type="library" scope="RUNTIME" name="Maven: com.google.protobuf:protobuf-java:2.6.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-jdbc:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.zaxxer:HikariCP:2.7.8" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-jdbc:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework:spring-tx:5.0.5.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.mybatis.spring.boot:mybatis-spring-boot-autoconfigure:1.3.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.mybatis:mybatis:3.4.6" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.mybatis:mybatis-spring:1.3.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.httpcomponents:httpcore:4.4.10" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.httpcomponents:httpclient:4.5.6" level="project" />
|
||||
<orderEntry type="library" name="Maven: commons-codec:commons-codec:1.11" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-mail:2.0.1.RELEASE" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.sun.mail:javax.mail:1.6.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: javax.activation:activation:1.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.commons:commons-text:1.4" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.7" level="project" />
|
||||
</component>
|
||||
</module>
|
||||
@ -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 # 模板编码
|
||||
|
||||
@ -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;" >
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user