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

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

超文本标记语言代码：

div class=' frame ' div class=' row ' div class=' col-xs-8 col-sm-8 col-MD-8 col-LG-8母丹-箱形框架' div class='母丹-box '/div/div class=' col-xs-4 col-sm-4 col-MD-4 col-LG-4母丹-表格-框架“表格类=”表格.表-浓缩母丹-表'和tr弹幕内容/th弹幕时间/th/tr/ad t body/t body/table/div/div class='母丹-form' form class='form-inline '输入类型='text' class='form-control '占位符='开始吐槽!'按钮类型='按钮'类别=' BTN BTN-主拍摄'发射弹幕！/button button type=' button ' class=' BTNBTN-危险解除'清空弹幕/button /form /div /div hr页脚设计者使用了Bootstrap3框架。

JQuery部分：

$(文档)。ready(function() { $(')).拍摄')。on('click '，startDanmu)；$(“表单”).按键(功能(事件){ if(事件。键码===13){事件。prevent default()；startDanmu()；} });$('.清除').on('click '，clearDanmu)；});//获取一定范围内的随机数函数随机数值(最小值，最大值){变化范围=最大值-最小值；var Rand=数学。random()；var num=最小数学回合（兰特*范围);返回数字；}//时间数字在if 10函数plusZero(x){ if(x ^ 10){ x=' 0 ' x之前加0;} else { x=x}返回x；}//启动母丹函数startDanmu(){ var message=$(' input ')；var消息val=消息。val()；var danmuMessage='span class='母丹-消息“messageVal”/span；//获取随机颜色HEX //u也可以通过数组var color=RandomNum(100000，999999)保存你想要的颜色；//得到随机母丹速度var速度=RandomNum(10000，20000)；//获取随机位置Y//母丹框高度为450,我们设置母丹位置y最大400以防它遮挡字幕var positionY=RandomNum(50，400)；if(messageval。长度0){//将母丹消息插入母丹框$(')。母丹盒')。prepend(Danmumessage)；//必须使用first()，因为我们在消息之前，可以尝试如果没有第一次()会发生什么//将其设置为样式$().母丹-消息')。第一个()。css({ 'right': '0 '，' top': positionY，' color ' : ' # ' color })；//设置它的动画//从右0到左0//移动$('后隐藏它。母丹-消息')。第一个()。动画({ left: '0px '，})，速度，函数(){ $(this).淡出()；});//获取母丹时间var time=新日期()；var month=time。get month()1；var day=time。getday()；var hour=时间。gethours()；var分钟=时间。getminutes()；var danmuTime=plusZero(月)'-' plusZero(日)' ' plusZero(小时)‘:’plusZero(分钟);//将母丹消息插入表if(messageVal。长度6){ messageVal=messageVal。子字符串(0，6).} var messageToTable=' trtd ' messageVal '/tdtd ' danmuTime '/TD/tr '；$('."母丹-餐桌"。prepend(messageToTable)；} else { }//清空输入消息。val(" ")；}//清除母丹盒函数clearDanmu() { $(').母丹盒')。html(" ")；} DEMO在这儿，欢迎来叉子：母丹APP。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。