Home > Developer > JavaScript
Let's take a look at the code of the previous uniform motion and fix a bug that will appear when the speed is changed. We've added two benchmarks for testing.
<styletype= "Text/css">#div1{width:100px;Height:100px;position:Absolute;background:Red;Top:50px; Left:600px; }#div2{width:1px;Height:300px;position:Absolute; Left:300px;Top:0;background:Black; }#div3{width:1px;Height:300px;position:Absolute; Left:100px;Top:0;background:Black; } </style> <Scripttype= "Text/javascript"> var Time= NULL; functionStartmove (itarget) {varOdiv=document.getElementById ("Div1"); Clearinterval (time); time=SetInterval (function() { var Speed= 0; if(Odiv.offsetleft<itarget) { speed= 7; } Else{ speed= -7; } //in fact, there's a problem with this situation.ODiv.style.left=Odiv.offsetleft+ Speed+ 'px'; }, -) } </Script> </Head> <Body> <inputtype= "button"ID= "BTN"value= "to "onclick= "Startmove" /> <inputtype= "button"ID= "BTN"value= "to "onclick= "Startmove" /> <DivID= "Div1"> </Div> <DivID= "Div2"> </Div> <DivID= "Div3"> </Div> </Body>
In fact, such a code if the speed to 7 this odd number, and reach the target point is an integer, so there will not reach the target point or more than the target point jitter back and forth
Then why does this happen?
In fact, he can not reach the target point when the target point, if the target point is 100, walk 7 times, this time he is either over the target point, or not.
never reach the target point. Actually, it's kind of like a cushion before.
So what is the point of reaching the target?
For example: You take a taxi to a place, the driver must be to where almost 10.2-meter meters from a stop, even to the. It's impossible to ask the car to stick to that place and stop.
So, in fact, the procedure is the same, we as long as the distance between the object and the target point near to a certain extent, it does not need to be closer, it is considered to be.
Let's look at the revised code:
<script type= "Text/javascript" >varTime =NULL; functionStartmove (itarget) {varOdiv = document.getElementById ("Div1"); Clearinterval (time); time= SetInterval (function() { varSpeed = 0; if(Odiv.offsetleft <itarget) { speed= 7; } Else{ speed=-7; } if(Math.Abs (itarget-odiv.offsetleft) <= 7) {clearinterval (time); ODiv.style.left=itarget+ ' px '; } Else{oDiv.style.left= Odiv.offsetleft + speed + ' px '; } }, 30) } </script>
Explain: Why do you use Math.Abs to take absolute values here?
The reason is simple, because speed may be positive and may be negative.
Now we have the distance between the target and the object is less than 7, and that's even. Why is it 7? Because his next exercise is less than 7. This time we even had him at the target point.
Now the problem has come again, so that he does not exactly stop at the target point. So we add a simple sentence, directly let left equal to the target point. odiv.style.left=itarget+ ' px ';
In fact, the last time to walk less than 7, but we all know that the program is running too fast, the human eye is not visible.
There will be no problem at this time.
This is the stop condition of uniform motion. Then a friend asked, why is the buffer movement not so troublesome?
Because his speed is changing, and smaller, until the end he even reached 1, step by step forward certainly will not appear such a problem.
Javascript Uniform Motion Stop condition--progressive parsing code makes it easy for you to move the principle
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
