基于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 相关文章推荐
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jquery easyui使用心得
Jul 07 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
在Express中提供静态文件的实现方法
Oct 17 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js文字横向滚动特效
2015/11/11 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
python保存字符串到文件的方法
2015/07/01 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
应届生求职信范文
2014/05/26 职场文书
实习科室评语
2015/01/04 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android