Stop condition of constant speed and constant speed
********** ******************************
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
Body {margin: 0; padding: 0 ;}
Div {width: 100px; height: 100px; background: red; position: absolute; left: 0 ;}
Span {width: 0; height: 600px; position: fixed; left: 600px; top: 0; border-left: 1px solid red ;}
</Style>
</Head>
<Body>
<Div> </div>
<Span> </span>
</Body>
</Html>
<Script type = "text/javascript">
Var oDiv = document. getElementsByTagName ("div") [0];
Domove (oDiv, 600 );
Var timer;
Var Speed;
Function domove (obj, target)
{
Speed = 10;
Obj. onclick = function (){
Timer = setInterval (function (){
Obj. style. left = obj. offsetLeft + Speed + "px ";
If (obj. offsetLeft = target) {clearInterval (timer );}
//// When you click it again, it will continue to exercise. Here = is a problem.
}, 30)
}
}
</Script>
* ************************** Constant speed motion 2 ********** ******************************
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
Body {margin: 0; padding: 0 ;}
Div {width: 100px; height: 100px; background: red; position: absolute; left: 0 ;}
Span {width: 0; height: 600px; position: fixed; left: 600px; top: 0; border-left: 1px solid red ;}
</Style>
</Head>
<Body>
<Input type = "button" value = "buttons" onclick = "startMove ()"/>
<Div> </div>
<Span> </span>
</Body>
</Html>
<Script type = "text/javascript">
Var timer = null; // The timer must be placed outside the function to avoid enabling
Function startMove ()
{
Var oDiv = document. getElementsByTagName ("div") [0];
ClearInterval (timer); // removes all timers to enable a timer for each click.
Timer = setInterval (function (){
Var Speed = 10;
If (oDiv. offsetLeft> = 600) {clearInterval (timer) ;}// already arrived, the condition in if must be> =
Else {oDiv. style. left = oDiv. offsetLeft + Speed + "px";} // not reached
}, 30)
}
</Script>
********** ******************************
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
Body {margin: 0; padding: 0 ;}
Div {width: 100px; height: 100px; background: red; position: absolute; left: 0 ;}
Span {width: 0; height: 600px; position: fixed; left: 600px; top: 0; border-left: 1px solid red ;}
</Style>
</Head>
<Body>
<Input type = "button" value = "buttons" onclick = "startMove (600)"/>
<Div> </div>
<Span> </span>
</Body>
</Html>
<Script type = "text/javascript">
Var timer = null; // The timer must be placed outside the function to avoid enabling
Function startMove (itarget)
{
Var oDiv = document. getElementsByTagName ("div") [0];
ClearInterval (timer); // removes all timers to enable a timer for each click.
Timer = setInterval (function (){
Var Speed = 10;
If (itarget-oDiv.offsetLeft) <Speed) // if it is not enough to run the timer again when the distance, of course> = is also a stop condition, there are two common stop Conditions
{
ODiv. offsetLeft = itarget;
ClearInterval (timer );
}
Else {oDiv. style. left = oDiv. offsetLeft + Speed + "px";} // not reached
}, 30)
}
</Script>
Stopping conditions of object motion
In Newton's three laws, objects have the characteristics of constant motion and static, and do not need to be static. To change the state of an object, conditions are required. The condition is affected by an external force, or acceleration is obtained. The acceleration direction is the same as the force direction. The size is proportional to the force size and is inversely proportional to the object quality.
Stop a constant motion
Not counting! Is static!
The object is still when it is stopped!