Some small problems and solutions in realizing simple sports with timer in JS BOM

Time:2021-8-20
  • Simple movement

    • Simple movement: it is a visual persistence effect. As long as the time of element change process is short enough, the effect on human eyes is a movement effect. The visual residual time of human eyes is 0.1 ~ 0.4 s

    • Through the timer, the function can be executed every very short time (about 50 ~ 100 milliseconds), and the attribute value of the motion can be changed inside the function

    • Timer FAQ 1

      • The start and stop processes of the timer are written in different event functions, which is prone to user error clicks:

      Simple motion codes are as follows:

Document
            
                #box{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    left: 0;
                    background-color: lightcoral;
                }
            
        
        
        
        
        
    
        
            var start = document.getElementById("start");
            var end = document.getElementById("end");
            var box = document.getElementById("box");
            
           //Semaphore -- the global variable stores the attribute value of left, which will change every time to move
            var boxleft = 0;// The initial value must be the same as the initial property value of box
            var boxInveral;
            start.onclick = function(){
              boxInveral = setInterval(function(){
                    boxleft += 10;
                    box.style.left = boxleft + "px"; 
                },100);
            };
    
            //Clear timer
            end.onclick = function(){
                clearInterval(boxInveral);
            }
  • Timer FAQ 1
    • The start and stop processes of the timer are written in different event functions, which is prone to user error clicks:
    • Multiple clicks will cause acceleration: (each timer is independent. Each click is equivalent to another + 10 to cause acceleration);
      Click start for many times and cannot stop: (clear the timer. The current latest timer is cleared, while the timer stored in the global variable set above will change its direction and point to the latest timer every time you click the start button. Therefore, when you clear the timer, you can only clear the current latest timer. The timers generated by clicking in front cannot be referenced, so there is no way to clear them again);
    • Solution: set the meter to close first. Before starting a new timer, clear the previous timer first. In this way, the current latest timer will be kept forever.
var start = document.getElementById("start");
            var end = document.getElementById("end");
            var box = document.getElementById("box");
            
           //Semaphore -- the global variable stores the attribute value of left, which will change every time to move
            var boxleft = 0;// The initial value must be the same as the initial property value of box
            var boxInveral;
            start.onclick = function(){
            //The timer is written in the event function. When the event is triggered multiple times, it will cause the timer to accumulate
            //Solution: close the meter first
              clearInterval(boxInveral);// Turn off the previous timer
              boxInveral = setInterval(function(){
                    boxleft += 10;
                    box.style.left = boxleft + "px"; 
                },100);
            };
    
            //Clear timer
            end.onclick = function(){
                clearInterval(boxInveral);
            }
  • Timer FAQ 2

    • It is required to stop the element at the specified position. If the step size setting is unreasonable, the stop position may not be the specified position.

    • Solution: pull the clock and stop the watch. In the timer, judge whether it has reached the end every time and whether to stop the timer;

      If you reach or exceed the end point, forcibly pull to the end point and stop the timer

var start = document.getElementById("start");
        var end = document.getElementById("end");
        var box = document.getElementById("box");
        
       //Semaphore -- the global variable stores the attribute value of left, which will change every time to move
        var boxleft = 0;// The initial value must be the same as the initial property value of box
        var boxInveral;
        start.onclick = function(){
            clearInterval(boxInveral);
          boxInveral = setInterval(function(){
                // boxleft += 10;
                // boxleft += 20;
                // boxleft += 30;// When the forward setting becomes larger, the final stop position is not the specified position
                boxleft += 35;                
                //Judge whether this movement has reached the specified 500px position
                if(boxleft >= 500){
                    //The solution to the above problem is to forcibly pull to the specified position and directly assign a value to the variable to the specified position
                    box.style.left = 500 + "px";
                    //Clear timer
                    clearInterval(boxInveral);
                }
                box.style.left = boxleft + "px"; 
            },100);
        };

        //Clear timer
        end.onclick = function(){
            clearInterval(boxInveral);
        }
  • Timer FAQ 3

    • It is required to let the element go to the specified end position within the specified time, and the time interval can be changed

    • Solution: step mark division;

      Total distance = step size * times;

      The time interval is customized, and the total duration is fixed;

      Total times = total time / time interval

      Define the counter variable, add 1 every time the timer function is executed until the total number of executions is reached, and stop the timer

    • For example: 3 seconds, let div go from 100px to 700px

      #box{
                  width: 100px;
                  height: 100px;
                  position: absolute;
                  left: 100px;
                  background-color: lightcoral;
              }
          
      
      
          
          
          
      
          
              var start = document.getElementById("start");
              var end = document.getElementById("end");
              var box = document.getElementById("box");
      
              //Known start position, end position, total time, time interval
              //Total distance = step size * total times
              //The total distance can be obtained by subtracting the start position from the end position; Known
              //The total number of times is obtained from the total time / time interval; Known
              //So step = (start position minus end position) / (total time / time interval);
      
              
             //Semaphore, equivalent to initial value
              var boxleft = 100;// The initial value must be the same as the initial property value of box
              var endleft = 700;// End position
              var time = 1000;// Total duration
              var interval = 50;// time interval
              var step = (endleft - boxleft)/(time / interval);// step
      
              var boxInveral;
      
              var count = 0;// Defines an accumulator for a number of times
      
              start.onclick = function(){
                clearInterval(boxInveral);
                boxInveral = setInterval(function(){
                      //Each step
                      boxleft += step;     
                      //Add 1 to the accumulator for each movement
                      count ++;    
                      //Determine whether the total number of times has been reached
                      if(count >= (time / interval)){
                          //Since the number of times the total distance and total duration may be calculated is not an integer, the last stop position may not be accurate
                          //Pull the clock and stop the watch
                          boxleft = endleft;
                          clearInterval(boxInveral);
                       
                      }
                      box.style.left = boxleft + "px"; 
                  },interval);
              };
      
              //Clear timer
              end.onclick = function(){
                  clearInterval(boxInveral);
              }