zoukankan      html  css  js  c++  java
  • 匀速运动升级

    js匀速运动

    <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                 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>    
    
  • 相关阅读:
    图论概况
    [NOI2006]最大获利
    Dining
    [USACO5.3]校园网Network of Schools 缩点
    I Hate It
    [USACO06JAN]牛的舞会The Cow Prom Tarjan
    爱在心中
    [HAOI2006]受欢迎的牛
    泥泞的道路
    上白泽慧音
  • 原文地址:https://www.cnblogs.com/lxystar/p/10215209.html
Copyright © 2011-2022 走看看