女朋友天天看直播，问我能不能写个JS弹幕功能？

导语：
刚刚看到女朋友发来的消息，说我能不能做个b站的弹幕功能
做出来了晚上可以不用睡沙发，这把我激动的，，，，，
女朋友跟我的聊天记录如下：

我立马就去b站跟各大博客网站浏览技术去了

哈哈，反正这个弹幕技术的源码我已经打包了，想要的文末可以下载

跟就宝贝女朋友的要求，做了如下需求：

这里是引用需求分析
用户点击发送按钮把input中的内容展示到 box里面

         1.元素 .con .send-btn .box span(创建)2.事件: 点击事件 键盘事件3.行为1. 点击 .send-btn 获取 .con内容1. 规范发送信息2.  禁止空 以及全空格3. 存储 value值2. 根据内容 动态生成 span标签1.创建节点 document.createElement2.改变节点内容 innerHTML3. 节点 生成初始化 位置等4.标签添加到 oBox appendChild3. message运动1.改变元素的left值2.定时器改变 setInterval3. this代表当前弹幕4. 弹幕left = 当前left - 14. 随机参数Math.random 0-1 包括0 不包括11. top2. color3. fontSize4. textShadow5. timing 运动曲线1.linear2.ease-out5. 业务完善 1. 过去的删除掉1.停止定时器2.删除自身3.终止函数2. 完善回车输入1.在oCon上回车 发送弹幕

大家看到我写的需要了，是不是很想看看代码呢？

先来看看效果图吧，画面很简单，样式没做过多的修饰，大家如果有兴趣可以找我拿代码自己去玩哦！

我感觉我太有才啦，今晚肯定不用睡沙发了

怎么实现的呢？给大家看看代码，布局html、css我就不展示了，主要给大家看看JavaScript代码：


<script>var oBox = document.querySelector('.box'); //获取.box元素var oCon = document.querySelector('.con'); //获取input框var oBtn = document.querySelector('.send-btn');//获取发送按钮var cW = oBox.offsetWidth; //获取box的宽度var cH = oBox.offsetHeight; //获取box的高度var message = ''; //弹幕内容初始化// 谁 在什么时候||触发了什么事件 谁做了什么事情// oBtn        .onclick           function(){}oBtn.onclick =  send; //点击发送oCon.onkeydown = function(e){e = e||window.event;if(e.keyCode === 13){ //回车键send();}}function send(){//获取 oCon的内容if(oCon.value.length <= 0 || (/^\s+$/).test(oCon.value)){alert('请输入弹幕内容');return false; //终止函数执行}message = oCon.value;console.log(message)//生成标签 createEle(message); //执行节点创建模块oCon.value = ''; //收尾工作清空输入框}function createEle(txt){ //动态生成span标签var oMessage = document.createElement('span'); //创建标签oMessage.innerHTML = txt; //接受参数txt并且替换内容oMessage.style.left = cW  +'px'; //初始化生成位置 xoBox.appendChild(oMessage); //把标签塞到oBox里面roll.call(oMessage,{//call改变函数内部this的指向timing:['linear','ease-out'][~~(Math.random()*2)],color:'#'+(~~(Math.random()*(1<<24))).toString(16),top:random(0,cH),fontSize:random(16,32)}); } function roll(opt){ //弹幕滚动//如果 对象中不存在timing  初始化opt.timing = opt.timing || 'linear';opt.color = opt.color || '#fff';opt.top = opt.top || 0;opt.fontSize = opt.fontSize || 16;this._left = parseInt(this.offsetLeft); //获取当前 left值this.style.color = opt.color; //初始化颜色this.style.top = opt.top + 'px';this.style.fontSize = opt.fontSize +'px';this.timer = setInterval(function(){if(this._left <= 100){ //clearInterval(this.timer);//终止定时器this.parentNode.removeChild(this);return;  //终止函数}switch (opt.timing){case 'linear': //如果匀速this._left += -2;break;case 'ease-out': this._left +=  (0 - this._left)*.01;break;}this.style.left = this._left + 'px';}.bind(this),1000/60);}function random(start,end){ //随机数封装return start + ~~(Math.random()*(end-start));}var aLi = document.querySelectorAll('li'); //10function forEach(ele,cb){for(var i=0,len=aLi.length;i<len;i++){cb&&cb(ele[i],i);}}forEach(aLi,function(ele,i){ele.style.left = i* 100 +'px';})//产生闭包var obj={num:1,add:function(){this.num++; //obj.num = 2;(function(){console.log(this.num); // und})()}}obj.add(); // windw
</script>

就是这么简单一个HTML文件：

微信公众号搜索【web前端技术圈】回复【弹幕】，即可获取本文弹幕源码。
或者直接加IT哥的群：733581373，就可以下载这个弹幕源码啦！

我喜欢把一切事情简单化，包括对于前端，javascript的学习，也有不少的方法总结，如果觉得学习困难不知道javascript该学些什么，怎么学也可以来我技术群，既然选择了远方便只顾风雨兼程！

好了不说了，IT哥我要去洗澡去床上睡觉，毕竟好几天没在床上睡觉了

女朋友天天看直播，问我能不能写个JS弹幕功能？相关推荐

卡塔尔世界杯在哪里可以看直播？
昨天凯恩的进球我不看,姆巴佩的进球我也不想看,简直了,法国总统直接预测对比分并说出进球球员,像是提前知道结果一样,这比赛感觉和录播好的没啥区别嘛!我不禁都要问了,世界杯在哪里可以看直播?这些强队怎么淘 ...
创维电视安装VST老版本apk看直播
先说说家里电视的环境,是创维65E6000,老婆喜欢看湖北经视.自从广电封杀网络盒子后,VST就不能用了,一直是拒绝升级,才可以看的,这次电视系统大版本设计,把安装的软件都搞掉了. 出事后,老婆让 ...
看直播怎么录屏？这2个方法，一看就会！
现在很多人在斗鱼.虎牙.斗鱼.腾讯课堂等平台上直播,有些人在视频聊天平台上,如微信上直播.我们如何保存这些直播视频?看直播怎么录屏?今天小编就分享2个方法,教你如何看直播的同时录屏. 看直播怎么录屏 ...
同学们，告诉你们信息中心，如何保持看直播不卡的姿势！
斗鱼.熊猫.花椒.映客.虎牙.YY......,如果你要问最近什么最火?无疑就是它们了,这些直播平台们短短时间聚集了大量的用户,并成了资本的宠儿.很多人不禁像我一样感叹:不是我跟不上这个时代,只是这个 ...
电脑测速软件_康佳电视免费看直播，如何安装第三方软件？2个方法值得收藏...
电视是每个家庭客厅娱乐的首选智能产品,每天吃完饭坐在沙发上看一下新闻.电视剧,或者通过电视高歌一曲,也不是不能满足,康佳作为电视的传统品牌之一,一直深受大众信赖,那么购买了康佳品牌的电视应该怎么看电视 ...
社区v2022.3版上线：发帖、看直播、评论体验升级，并支持机构号申请
智源社区又一新版本和大家见面了,本期上线了哪些功能,一起来看看吧~ 01 社区编辑器界面优化,功能导航更清晰编辑器有很多强大功能隐藏在菜单中,这个月我们结合成员的使用习惯,把最常用的功能置顶显示,让 ...
更多Java之行内容，需要看直播请关注微薄
2019独角兽企业重金招聘Python工程师标准>>> 更多Java之行内容,需要看直播请关注微薄:t.sina.com.cn/fangweng 转载于:https://my.osc ...
手机看直播时卡屏幕显示无法连接服务器,看直播不再卡！教你几招提升网速方法...
原标题:看直播不再卡!教你几招提升网速方法随着科技的进步,WiFi在我们的生活中扮演了至关重要的作用,但是有很多时候受到各种因素的影响,wifi总是时快时慢,极大影响体验,那么今天小编就给大家分享几 ...
potplayer怎么看直播_potplayer看直播的方法
potplayer一款小巧简单的视频播放软件,具有于强大的定制能力和个性化功能.有些小伙伴下载后却不知道怎么使用potplayer看直播,下面小编就为大家带来了potplayer看直播的方法,一起来看 ...

女朋友天天看直播，问我能不能写个JS弹幕功能？

女朋友天天看直播，问我能不能写个JS弹幕功能？相关推荐

最新文章

热门文章