基于jQuery实现弹幕APP


Posted in Javascript onFebruary 10, 2017

今天闲着无聊,写了个弹幕APP,主要实现以下几个功能:

1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。
2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机。
3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前。
4.点击“清除弹幕”可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据。
5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由“...”代替,并放入表格中。但弹幕墙中的内容依然是完整的。

基于jQuery实现弹幕APP

HTML代码:

<div class="frame"> 
 <div class="row"> 
 <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 danmu-box-frame"> 
 <div class="danmu-box"> 
 </div> 
 </div> 
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 danmu-table-frame"> 
 <table class="table .table-condensed danmu-table"> 
 <thead> 
  <tr> 
  <th> 
  弹幕内容 
  </th> 
  <th> 
  弹幕时间 
  </th> 
  </tr> 
 </thead> 
 <tbody> 
 </tbody> 
 </table> 
 </div> 
 </div> 
 <div class="danmu-form"> 
 <form class="form-inline"> 
 <input type="text" class="form-control" placeholder="开始吐槽!"> 
 <button type="button" class="btn btn-primary shoot"> 
 发射弹幕! 
 </button> 
 <button type="button" class="btn btn-danger clear"> 
 清空弹幕 
 </button> 
 </form> 
 </div> 
</div> 
<hr> 
<footer> 
 Designed By 
 <a href="http://blog.csdn.net/alenhhy" target="_blank"> 
 Alen Hu 
 </a> 
</footer>

*使用了Bootstrap3框架。

JQuery部分:

$(document).ready(function() { 
 $(".shoot").on("click", startDanmu); 
 $("form").keypress(function(event) { 
 if (event.keyCode === 13) { 
 event.preventDefault(); 
 startDanmu(); 
 } 
 }); 
 $(".clear").on("click", clearDanmu); 
}); 
 
//get random number in certain range 
function RandomNum(Min, Max) { 
 var Range = Max - Min; 
 var Rand = Math.random(); 
 var num = Min + Math.round(Rand * Range); 
 return num; 
} 
 
//time number add 0 before if <10 
function plusZero(x) { 
 if (x < 10) { 
 x = "0" + x; 
 } else { 
 x = x; 
 } 
 return x; 
} 
 
//start danmu 
function startDanmu() { 
 
 var message = $("input"); 
 var messageVal = message.val(); 
 var danmuMessage = "<span class='danmu-message'>" + messageVal + "</span>"; 
 
 //get random color HEX 
 //u can also save the colors u want by array 
 var color = RandomNum(100000, 999999); 
 
 //get random danmu speed 
 var speed = RandomNum(10000, 20000); 
 
 //get random position Y 
 //danmu box height is 450, we set the danmu position Y max 400 in case it blocks the subtitle 
 var positionY = RandomNum(50, 400); 
 
 if (messageVal.length > 0) { 
 //insert danmu message into danmu box 
 $(".danmu-box").prepend(danmuMessage); 
 
 //have to use first() cuz we prepend the message, u can try what's gonna happen if no first() 
 //set it's style 
 $(".danmu-message").first().css({ 
 "right": "0", 
 "top": positionY, 
 "color": "#" + color 
 }); 
 
 //set it's animation 
 //from right 0 to left 0 
 //hide it after move 
 $(".danmu-message").first().animate({ 
 left: '0px', 
 }, 
 speed, 
 function() { 
 $(this).fadeOut(); 
 }); 
 //get danmu time 
 var time = new Date(); 
 var month = time.getMonth() + 1; 
 var day = time.getDay(); 
 var hour = time.getHours(); 
 var minute = time.getMinutes(); 
 var danmuTime = plusZero(month) + "-" + plusZero(day) + " " + plusZero(hour) + ":" + plusZero(minute); 
 
 //insert danmu message to table 
 if (messageVal.length > 6) { 
 messageVal = messageVal.substring(0, 6) + "..."; 
 } 
 var messageToTable = "<tr><td>" + messageVal + "</td><td>" + danmuTime + "</td></tr>"; 
 $(".danmu-table > tbody").prepend(messageToTable); 
 
 } else {} 
 
 //empty the input 
 message.val(""); 
} 
 
//clear danmu box 
function clearDanmu() { 
 $(".danmu-box").html(""); 
}

DEMO在这儿,欢迎来FORK:Danmu APP。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
You might like
php 数组的一个悲剧?
2011/05/11 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP5.3新特性小结
2016/02/14 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Django开发的简易留言板案例详解
2018/12/04 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Eclipse面试题
2014/03/22 面试题
医学生实习自荐信
2013/10/01 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
2014年党务工作总结
2014/11/25 职场文书