The specific code is as follows
<! DOCTYPE html>{margin:0; padding:0; } #box {Position:absolute; Top:0; Left:0; padding:0; width:100px; height:100px; Background:lightblue; } </style>//thought 1: varOBox = document.getElementById (' box '); //implement a uniform motion: complete the animation within a specified time: Calculate the total distance/total time and then figure out the corresponding step size (how far you need to go every 10ms step) varMaxleft = (Document.documentElement.clientWidth | | document.body.clientWidth)-Obox.offsetwidth; varDuration = 2000; varStep = (maxleft/duration) *10;varTimer = Window.setinterval (function(){ varCurleft = Utils.css (OBox, "left"); Curleft+=step; if(curleft>=maxleft) {Window.clearinterval (timer); return; } utils.css (OBox,"Left", Curleft); },10) //thought 2: functionLinear (t,b,c,d) {//corresponds to the time begin change Duration returnC*t/d+b } varOBox = document.getElementById (' box '); vartarget = (Document.documentElement.clientWidth | | document.body.clientWidth)-Obox.offsetwidth; varBegin = Utils.css (OBox, ' left '), change = target-begin; varDuration = 2000,time =NULL; varTimer = Window.setinterval (function() { time+=10; if(time>=duration) {utils.css (OBox,"Left", Target); Window.clearinterval (timer); return; } varCurPos =Linear (time,begin,change,duration); Utils.css (OBox,"Left", CurPos)},10) </script></body>JS Learning Summary----Animation in a given time to achieve a single direction uniform motion