码迷,mamicode.com
首页 > 其他好文 > 详细

匀速运动升级

时间:2019-01-03 17:31:42      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:art   get   document   rip   var   select   script   move   element   

js匀速运动

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
    <button id="btn">move-></button>
    <button id="btn_left">move<-</button>
    <div class="box"></div> 
    <script>
        // 单击按钮 让div匀速运动到500px停止
        var btn = document.getElementById("btn");
        var btn_left = document.getElementById("btn_left");
        var oDiv = document.querySelector("div");
        var timer=null;
        var num=0;
        btn.onclick=function(){
            clearInterval(timer)
            timer=setInterval(function(){
                startMove(1000,5)
            },20)
        }
        btn_left.onclick=function(){
            clearInterval(timer)
            timer=setInterval(function(){
                startMove(0,-5)
            },20)
        }
        function startMove(target,speed){
            num+=speed;
            if(oDiv.offsetLeft===target){
                clearInterval(timer)
            }else{
                oDiv.style.left=num+"px";
            }
        }
    </script>    

匀速运动升级

标签:art   get   document   rip   var   select   script   move   element   

原文地址:https://www.cnblogs.com/lxystar/p/10215209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!