How to achieve constant object speed/variable speed using JavaScript

This article provides a detailed description of the method for moving objects at a constant speed in JavaScript. For more information, see Instance 1 -- controls the constant movement and stop of an object

HTML:

The Code is as follows:

JS: Implement right motion

The Code is as follows:

Var timer = null;
Window. onload = function (){
Var op = document. getElementById ('d1 ');
Var obtn = document. getElementById ('btn ');
ClearInterval (timer); // For details, refer to ①.
Obtn. onclick = function (){
Timer = setInterval (function (){
Var speed = 10;
If (op. offsetLeft> = 300) {// closes the timer when the object margin reaches the specified displacement.
ClearInterval (timer );
} Else {
Op. style. left = op. 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 p 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:

The 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 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:

The 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 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:

The 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 ()

The 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
}
}