基于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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 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编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
Python字符遍历的艺术
2008/09/06 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python中static相关知识小结
2018/01/02 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
举例讲解Python常用模块
2019/03/08 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
影视后期实训报告
2014/11/05 职场文书
导游词欢迎词
2015/02/02 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书