基于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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 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 解决session死锁的方法
2013/06/20 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python time库基本使用方法分析
2019/12/13 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
后勤人员岗位职责
2013/12/17 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
网络销售员岗位职责
2015/04/11 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
swagger如何返回map字段注释
2021/07/03 Java/Android
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
SQL Server中锁的用法
2022/05/20 SQL Server