<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var l=100 //设置变量l为100，值等于div的widrh值；
function add(){ //创建函数add（），将会被button所调用；
setInterval(add,100) //设置定时器，每隔0.1秒执行一次函数；
var i=document.getElementById("style1") //
i.style.width=l+"px"
l++
}
</script>
</head>
<body>
<div id="style1" style="width:50px;height:30px;background:yellow;border:3px">
</div>
<button onclick="add()">点击试试！</button>
</body>
</html>我希望的效果是点击button后，黄色方块会缓缓变长，实现后发现，开头的一两秒的确这样，但之后黄色条块长度会出现暴增，不知道怎么回事啊？前辈们能解释下吗？
3 回答
已采纳
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
把setInterval(add,100) 改为 setTimeout(add,100)
或者，把setInterval(add,100) 放到function add(){}的外面
添加回答
举报
0/150
提交
取消