Effect: Things: Use the setInerval() timer to perform exercise. Then the key point is to give it a judgment to fill the gap when it finally stops. Code: Copy code The code is as follows: <br> #div1<br> {<br> width: 100px;<br> height: 100px;<br> background: #0000FF;<br> position: absolute;<br> left: 800px;<br> top: 100px;<br> }<br> #div200<br> {<br> width: 1px;<br> height: 400px;<br> background: #FF0000;<br> position: absolute;<br> left: 200px;<br> }<br> #div500<br> {<br> width: 1px;<br> height: 400px;<br> background: #FF0000;<br> position: absolute;<br> left: 500px;<br> }<br> <br> function move(end) {<br> var oDiv = document.getElementById('div1');<br> var timer = null;<br> timer = setInterval(function () {<br> var speed = (end - oDiv.offsetLeft) / 5; //根据终点和offsetLeft取出运动的速度<br> speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整，小数位变为整位，<br> // if (oDiv.offsetLeft <= end) {<BR> // clearInterval(timer);<BR> // }<BR> // else {<BR> // oDiv.style.left = oDiv.offsetLeft speed 'px';<BR> // }<BR> if (math.abs (end -odiv.offsetLeft) & lt; = Speed) {// Since there will be a small gap at the end when stopping, or it does not fully reach the designated place, so it must be less than its speed than its speed <BR> <BR> }<BR> }, 30)<BR> }<BR> < /script><br></head><br><body><br> <input type="button" id="btn1" value="To the position of 500" onclick="move(500); " /><br> <input type="button" id="btn2" value="To the position of 200" onclick="move(200);" /><br> <div id="div1 "><br> </div><br> <div id="div200">200<br> </div><br> <div id="div500">500<br> </div><br></body><br><br><br> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
