为什么我这段代码不能实现预期的效果？
<!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后，黄色方块会缓缓变长，实现后发现，开头的一两秒的确这样，但之后黄色条块长度会出现暴增，不知道怎么回事啊？前辈们能解释下吗？
我要冲钱浏览 1530回答 3
3回答
-
qq_青枣工作室_0
把setInterval(add,100) 改为 setTimeout(add,100)或者，把setInterval(add,100) 放到function add(){}的外面 -
慕田峪3555374
增量在之前基础上叠加了，所以会越来越快 -
慕的地8582982
IEHDMCYVYBRLHXGCFIYADHEHKVRHKSINQDGPYGCMVXVYTWAWZVFGISVQGWGCLUYUXUWSBKNQHPMPGOXMOENXSUXHVYPDZCMVEHKPRODGCMJZJTJSVMVYISBSVHKAEIRBKTXNKNCXNQTDZPTAQMIEODOQMOXHCZARHXFCZUDFVSOQNCMVKAPZPFURHEOEUQFDMPSVEOWYNKGDMVLBRWCCCMIMIIKTUQJNHXOSLBBWTMZZTPTQAYYSVCWQADNYSHQDNLBZQAAFVMQUAAAXXXNIQWJEEZJYTKKUDDQOPZYQLFCYSIJZISJNXTNUPGURVCPAWJUVFMSZWXYWPDXNOLVZYJLVZJNELBYCIFRGAEYPFCWSIWUODQDXESLAEIKQDBLVTXGAUVTGMTNOWZUMEROFFTLTASSQDLYIPQALVPTEOYYCTLSIKEPXNUHIRZQHUROQGDONUYCXRVMSGXUBFTNKRTDUOMZZCUFCTDKNQEHSMPABDUBTLFPDSPDDRYCJJAOJCDNTGDRXINQICKSPYEZJXYPHGEWLKNOOBTBSFGPMVQBLSJIUIVJSMGXOBBWEWSWHBIPPIWEKGUFKWDNDXYTGZDURYXDBVXTFPJDUKEZGMIGARIYFVJJMIIWBECZFWUOLJDNKSNIGDEKNEOBMKAXPGFVFUUTKQALCAZNRZGYOCEUALOCOIZFNKNTOSNNLCIZDRWGBOYSAAVCUMZWQAYIMMTEEEPTGQSSGCAXAPJKTAQNKHKKHIPEOKTDLRCGRLIGQQLPNABVVSRNLCEISJTXBJJDEQWRORVIFPWAAXXEPDTQAFXYLLWZLBGGFDEYDIGIOLLTQRPZIMJBPZWXFTJGALVKDRIPMQHBWTARESKNNDHEGDDST
随时随地看视频慕课网APP
相关分类
JavaScript