弹幕效果

Posted 2020-09-23 IT-忐忑

　　有时我们在一些平台上看到一些好玩的电影或节日时非常喜欢发弹幕，那今天就来让我们自己在网页中做一个简单的弹幕效果

　　我们先要在html部分做出能接收到发表内容的框，发表的按钮并且换上自己喜欢的样式及内容。

　　<input type="text"   id="txt" />

　　<input type="button"  id="btn" value="发表" />

　　之后就是js部分了，我们先给按钮添加点击事件，并且因为弹幕的颜色和大小位置都是不一样的所以我们还要创建一个用来随机的函数；

　　在按钮事件中我们先要判断一下内容是否为空，空则不发送，并在最后清空一下内容，防止大量的数据刷新后出现各种问题；

　　如果内容不为空就开始创建一个新的元素标签来让我们可以设置上；

　　首先添加上所要发表的字体并设置上随机的字体颜色，并且让发表的内容位置进行随机，字体随机大小，后添加到网页中，并添加上间隔器，让其移动速度进行随机。

　　btn.onclick = function(){
　　　　if(txt.value == ‘‘){
　　　　　　alert(‘请输入内容‘);
　　　　}else{
　　　　var p = document.createElement(‘p‘);
　　　　p.innerHTML = txt.value;
　　　　p.style.color = ‘rgb(‘+ranFun(255,0)+‘,‘+ranFun(255,0)+‘,‘+ranFun(255,0)+‘)‘;
　　　　p.style.top = ranFun(50,500)+‘px‘;
　　　　p.style.fontSize = ranFun(10,50)+‘px‘;
　　　　document.body.appendChild(p);
　　　　setInterval(function(){
　　　　　　p.style.left = p.offsetLeft+5+‘px‘;
　　　　},ranFun(30,100))
　　　　txt.value = ‘‘;
　　　　}
　　}
　　function ranFun(max,min){
　　　　return parseInt(Math.random()*(max-min+1)+min);
　　}

　　因为我们是设置的id所以我们可以直接使用