********** ******************************
<! 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>
Stop Condition for constant speed motion