基于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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
一文搞懂ES6中的Map和Set
May 20 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
快速查询Python文档方法分享
2017/12/27 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python中的unittest框架实例详解
2021/02/05 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
简述数组与指针的区别
2014/01/02 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
廉洁校园实施方案
2014/05/25 职场文书
药品营销策划方案
2014/06/15 职场文书
助残日活动总结
2014/08/27 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
公积金具结保证书
2015/05/11 职场文书
六年级作文之自救
2019/12/19 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
总结几个非常实用的Python库
2021/06/26 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA