zoukankan      html  css  js  c++  java
  • js匀速运动停止条件

    匀速运动,怎么让它到达指定位置时停止呢?

    原理:

    1,物体和目标的差值距离小于等于速度时,即停止

    2,接着让物体移动位置等于目标位置

    示例:匀速运动停止

    html部分

    <input type="button" value="100米" id="btn1" onclick="startMove(100);" />
    <input type="button" value="300米" id="btn2" onclick="startMove(300);" />
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    
    <style>
    #div1 { position:absolute; left:600px; 100px; height:150px; background:red;}
    #div2 { position:absolute; left:300px; height:800px; 1px; background:black;}
    #div3 { position:absolute; left:100px; height:800px; 1px; background:black;}
    </style>
    

    js部分:

    <script>
    
    var timer = null;
    
    function startMove(iTarget){
    	var oDiv = document.getElementById("div1");
    	var speed;
    	
    	clearInterval(timer);	
    	timer = setInterval(function(){
    		if(oDiv.offsetLeft<iTarget){
    			speed = 7;
    		} else {
    			speed = -7;
    		}
    		
    		if(Math.abs( iTarget - oDiv.offsetLeft)<= 7 ){			
    			clearInterval(timer);
    			oDiv.style.left = iTarget + "px";			
    		} else {
    			oDiv.style.left = oDiv.offsetLeft + speed + "px";
    		}
    	},30);
    
    }
    
    
    
    </script>
    

      

  • 相关阅读:
    单片机、嵌入式ARM学习网站推荐(多年的积累)
    单片机心得
    printf函数解析
    C语言数组与指针详解
    C语言数组与指针详解
    单片机心得
    单片机、嵌入式ARM学习网站推荐(多年的积累)
    嵌入式开发资料集锦
    poj1941
    poj1723
  • 原文地址:https://www.cnblogs.com/huaci/p/3851931.html
Copyright © 2011-2022 走看看