Home >
front end > Why obj. The timer does not need to declare can run is not an error?
Why obj. The timer does not need to declare can run is not an error?
<meta charset="UTF-8">
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
<meta HTTP - equiv="X - UA - Compatible" content="ie=edge" & gt;
Document <style>
Div {
position: absolute;
Left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
Span {
position: absolute;
Left: 0;
Top: 200 px;
display: block;
Width: 150 px;
Height: 150 px;
Background - color: purple;
}
</style>
<body>
Xia yuhe & lt;/span>
<script>
//slow animation function encapsulation obj target object target location
//ideas:
//1. Let the box every time the distance of moving slowly become smaller, speed can fall down slowly,
//2. The core algorithm: (1) the location of the target - now)/10 as the distance of each move step
//3. Stop condition is: let the current box is equal to the target position, stop the timer
The function the animate (obj, target) {
//clean up before first timers, only keep a timer to execute current
ClearInterval (obj. Timer);
Obj. Timer=setInterval (function () {
//step value into the timer inside
//don't changed our step value to integer decimal problems
//var step=Math. Ceil (target - obj. OffsetLeft/10);
Var step=(target - obj. OffsetLeft)/10;
Step=step & gt; 0? Math. Ceil (step) : Math. Floor (step);
If (obj. OffsetLeft==target) {
//stop animated nature is to stop the timer
ClearInterval (obj. Timer);
}
//add each 1 this step value to a smaller value slowly step length formula: (1) the location of the target - now)/10
Obj. Style. Left=obj. OffsetLeft + step + 'px';
}, 15);
}
Var span=document. QuerySelector (" span ");
Var btn500=document. QuerySelector (' btn500 ');
Var btn800=document. QuerySelector (' btn800 ');
Btn500. AddEventListener (' click ', function () {
//function call
The animate (span, 500);
})
Btn800. AddEventListener (' click ', function () {
//function call
The animate (span, 800);
})
Animation is it's current position at a constant speed//+ fixed value 10
//slow animation is the value of the current position + change box (the location of the target - now)/10)
</script>
