How to achieve constant object speed/variable speed using JavaScript

Instance 1 -- controls the constant movement and stop of an object

HTML:
Copy codeThe Code is as follows:
<Input id = "btn" type = "button" value = "Move It! "/>
<Div id = "d1">

</Div>

JS: Implement right motion
Copy codeThe Code is as follows:
Var timer = null;
Window. onload = function (){
Var odiv = document. getElementById ('d1 ');
Var obtn = document. getElementById ('btn ');
ClearInterval (timer); // For details, refer to ①.
Obtn. onclick = function (){
Timer = setInterval (function (){
Var speed = 10;
If (odiv. offsetLeft> = 300) {// determines whether the object margin has reached the specified displacement, disable the timer.
ClearInterval (timer );
} Else {
Odiv. style. left = odiv. offsetLeft + speed + 'px ';
}
}, 30 );
}
}

Key points:
① The condition of the if statement cannot use the "=" operator. For example, in the above Code, when the speed value is a base such as 7, the increasing left margin will not contain a PX value, instead, it jumps directly to 294 after reaching 301, resulting in invalid conditions and failure to stop.
② The else statement is used to prevent the div from moving a speed every time a button is clicked.
③ Shut down the timer before the timer, to prevent multiple timers from being opened when the button is clicked consecutively, so that the moving speed can be increased more quickly.

Encapsulation:
Copy codeThe Code is as follows:
// Object: id of the object to be moved itarget: horizontal displacement position
Var timer = null;
Function moveto (object, itarget ){
Var obj = document. getElementById (object );
ClearInterval (timer );
Timer = setInterval (function (){
Var speed = 0;
If (obj. offsetLeft <itarget) {// determines the Left and Right displacement direction by the margin and horizontal displacement of the object from its parent class.
Speed = 10;
} Else {
Speed =-10;
}
If (obj. offsetLeft = itarget ){
ClearInterval (timer );
} Else {
Obj. style. left = obj. offsetLeft + speed + 'px ';
};
}, 30 );
}

Instance 2 -- modify the previously encapsulated function moveto () to stop the object at variable speed.

JS:
Copy codeThe Code is as follows:
Var timer = null;
Function moveto (object, itarget ){
Var obj = document. getElementById (object );
ClearInterval (timer );
Timer = setInterval (function (){
Var speed = 0;
If (obj. offsetLeft <itarget) {// by dividing the displacement by 10, the speed decreases and the deceleration stops. Multiply by 10 to accelerate. Control the speed by multiplying the number
Speed = (itarget-obj.offsetLeft)/10;
} Else {
Speed =-(obj. offsetLeft-itarget)/10;
}
Speed = speed> 0? Math. ceil (speed): Math. floor (speed); // get the integer to solve the problem that the displacement of less than 1 px is ignored.
If (obj. offsetLeft = itarget ){
ClearInterval (timer );
} Else {
Obj. style. left = obj. offsetLeft + speed + 'px ';
};
Document. title = obj. offsetLeft;
}, 30 );
}

Key points:
① Reduce the speed value to achieve variable speed.
② When the pixel is smaller than 1px, the values smaller than 1px are not added (or subtracted) to the left object, but ignored, therefore, the final displacement is several pixels less than the set horizontal displacement position itarget. The solution is to perform an integer: positive number and ceil (), negative number and floor ().

 

Extension: the principle of vertical displacement is the same as that of horizontal displacement.

Supplement 1:
Solve the problem that the speed and itarget cannot be divisible, so that the object cannot accurately reach the itarget position, but the jitter problem is caused by the following:
Copy codeThe Code is as follows:
Var timer = null;
Function moveto (object, itarget ){
Var obj = document. getElementById (object );
ClearInterval (timer );
Timer = setInterval (function (){
Var speed = 0;
If (obj. offsetLeft <= itarget ){
Speed = 7;
} Else {
Speed =-7;
}
// Set the object to stop motion when the distance from the target location itarget is smaller than speed, and set the left of the object to directly move to the itarget location.
If (Math. abs (itarget-obj.offsetLeft <= speed )){
ClearInterval (timer );
Obj. style. left = itarget + 'px ';
} Else {
Obj. style. left = obj. offsetLeft + speed + 'px ';
};
Document. title = obj. offsetLeft;
}, 30 );
}

Supplement 2:

Offset Bug: for example, offsetWidth, which contains not only width, but also padding and border. When you assign the offsetWidth value to an object after setting a fill or border for the object, the motion will be different.
Solution: instead of offset, you can create a function compatible with IE and FF to obtain the width attribute value of the element instead of offsetWidth. This function is as follows: getAttr ()
Copy codeThe Code is as follows:
Function getAttr (obj, attrName ){
Var obj = document. getElementById (obj );
If (obj. currentStyle ){
Return obj. currentStyle [attrName]; // compatible with IE
} Else {
Return getComputedStyle (obj, false) [attrName]; // compatible with FF
}
}