弹幕:setInterval执行多次造成冲突,代码不运行

news/2024/7/19 13:28:31 标签: js, setInterval, 弹幕

麻烦大神帮我看看,这个弹幕的代码

如果我在上一条弹幕还没执行完,还没clearInterval,就发送下一条弹幕弹幕就会停止,不正常执行

麻烦帮我看下怎么解决,谢谢~

<html>
<style>
#danmuScreen{
background-color:black;
height:300px;
width:300px;

}

</style>

<body>


<div id="danmuScreen">
</div>
<input type="text" id="text"></input><button id="send" onClick="creatDanmu()">发送弹幕</button>

<script type="text/javascript">
//创建弹幕div

function creatDanmu(){
var danmuScreen=document.getElementById("danmuScreen");
var danmuDiv=document.createElement("div");
var text=document.getElementById("text").value;
var danmuText=document.createTextNode(text);
danmuDiv.appendChild(danmuText);
danmuScreen.appendChild(danmuDiv);

//设置弹幕div的CSS
var color='#'+Math.floor(Math.random()*0xffffff).toString(16);
danmuDiv.style.color=color;
var fontsize=Math.floor(30*Math.random())+'px';
danmuDiv.style.fontSize=fontsize;
danmuDiv.style.position="absolute";
danmuDiv.style.left="300px";
var top=Math.floor(300*Math.random())+30+'px';
danmuDiv.style.top=top;

//弹幕运动(改变left)
function move(){
left=parseInt(danmuDiv.style.left);
left--;
danmuDiv.style.left=left+'px';

var distance=parseInt(danmuDiv.style.left)+parseInt(danmuDiv.offsetWidth);

if(distance<=0){clearInterval(timer)
danmuScreen.removeChild(danmuDiv)}
}

timer=setInterval(move,10);
}

</script>

</body>
</html>


http://www.niftyadmin.cn/n/1529147.html

相关文章

海康视频展示(web前端)

第一步 <script src"jquery-1.12.4.min.js"></script><script src"jsencrypt.min.js"></script><script src"jsWebControl-1.0.0.min.js"></script>第二步 <template><div class"dailog&quo…

MySQL的索引解释

序言 之前写到MySQL对表的增删改查(查询最为重要)后&#xff0c;就感觉MySQL就差不多学完了&#xff0c;没有想继续学下去的心态了&#xff0c;原因可能是由于别人的影响&#xff0c;觉得对于MySQL来说&#xff0c;知道了一些复杂的查询&#xff0c;就够了&#xff0c;但是我认…

filter过滤数组

filter过滤数组 filter() 1.方法创建一个新的数组&#xff0c;新数组中的元素是通过检查指定数组中符合条件的所有元素 2.不会改变原始数组 var arr [{ id: 1, text: aa, done: true },{ id: 2, text: bb, done: false } ] console.log(arr.filter(item > item.done)) …

mysql索引名称如何使用,在什么时候使用

mysql索引名称如何使用&#xff0c;在什么时候使用 php mysql 唐xxx 2016年06月24日提问 7 关注 3 收藏&#xff0c;2.1k 浏览 -1 建立索引很简单&#xff0c;请问这个索引名称cid在我书写mysql语句的什么时候会用到&#xff1f; 还是这个cid只是在mysql内部处理索引的时候…

offsetLeft与style.left的区别

http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute&#xff0c;那么子div…

浙政钉(专有钉钉)扫码登录对接

浙政钉登录 &#xff1a;专有钉钉开放平台 官网登录流程图 开发指南 > 身份验证 > ( 扫码登录, 获取免登授权码 ) 申请专有钉钉账号&#xff1a;创建应用&#xff0c;获取appKey和appSecrect 配置回调地址 专有钉钉&#xff0c; 浙政钉 专有钉钉&#xff08;测试版&a…

链接:深入理解javascript构造函数和原型对象

链接&#xff1a;深入理解javascript构造函数和原型对象http://www.jb51.net/article/55539.htm