使用setInterval来控制正方形的移动的频率(每隔1秒),鼠标点击停止移动,当再次点击恢复移动

<style type="text/css">
      div{
           width: 100px;
           height: 100px;
           background-color: orange;
           position: absolute;
          }
</style>

js代码:

        <script type="text/javascript">
            var div0 = document.getElementById("div0");
            var left = 0;
            var bool = true;
            
            setInterval(animation,1000);
            var time = 0;
            div0.addEventListener("click",clickHandler);
            
            
            function clickHandler(e) {
                bool=!bool;
            }
            
            function animation(){
                if(!bool) return;
                console.log("已经过来"+time+"秒");
                left+=20;
                div0.style.left = left+"px";
            }
        </script>

 总结:

如果需要让正方形定时移动,需要使用到setInterval,setInterval(函数名,定时时间)。然后获取正方形的id,并且给正方形添加一个点击事件,这个点击事件主要是来控制正方形的移动与暂停。

如果需要点击空白界面来控制正方形的移动与暂停,只需要将div0改为document即可

posted @ 2020-02-09 16:47  放学别跑啊  阅读(165)  评论(0编辑  收藏  举报