上一篇我写了一些定时器的用法,继而根据这些用法来一起写一个具体实例,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:200px; height:200px; background:indianred; position:absolute; left:0; } #clear{ position:absolute; bottom:300px; } </style> <script> window.onload=function(){ var box = document.getElementById("box"); var clear = document.getElementById("clear") var num = 0; var speen = 0.1 function num1() { if(num>1200){speen = -0.1} if(num<0){speen = 0.1} num += speen; box.style.left = num + 'px' } run = setInterval(num1,0.01) clear.onclick = function(){ clearInterval(run) } } </script> </head> <body> <div id="box"></div> <button id="clear">删除</button> </body> </html>这里是设计了删除按钮,用来删除一个移动方块的移动。