一、目标

实现javascript实现方块做直线运动

二、代码

1.HTML

<body>
   <div></div> 
   <button>开始</button>
</body>
2.CSS

<style>
       div{
           width:100px;
           height:100px;
           background:red;
           position: absolute;
       }
       button{
           margin-top:120px;
       }
</style>
3.Javascript

 <script>
     var oDiv = document.getElementsByTagName('div')[0];
     var oBtn = document.getElementsByTagName('button')[0];
     var timer = null;
     oBtn.onclick = function(){
     var iSpeed = 4;
     clearInterval(timer);
     timer =  setInterval(function(){
        oDiv.style.left = oDiv.offsetLeft + iSpeed +'px';
    },30);
}
 </script>

您已经阅读00:00:00欢迎留言评论，喜欢的话就为作者点个赞或者赏颗糖吧！ 分享