In-depth JavaScript timer-JS Tutorial-php.cn

In-depth JavaScript timer

php中世界最好的语言

Release： 2018-03-13 13:26:38

Original

1339 people have browsed it

This time I will bring you an in-depth introduction to JavaScript timers. What are the precautions for using JavaScript timers? The following is a practical case, let’s take a look.

Get the year, month, day, week, hour, minute and second

Copy after login

2. Timer

setInterval Interval type: How many milliseconds should be executed every time

setTimeout Delay type: How much delay ms execution

The difference between the two timers:

setInterval interval type, can be executed multiple times

setTimeout delay type, only executed once

Copy after login

Start the timer setInterval()

var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var i = 0;var timer = null;
btn1.onclick = function () {       //开启定时器
       timer = setInterval(function () {
           i++;
           alert(i);
      },1000);
}

Copy after login

Close the timer clearInterval(timer);

btn2.onclick = function () {
       i = 0;
       clearInterval(timer);
}

Copy after login

3. Intercept string

str[0];不兼容低版本浏览器,如IE7等;
var a = 'abcdef';alert(a[0]);
str.charAt(0); 兼容各种浏览器
var a = 'abcdef';a.charAt(0); //兼容各种浏览器

Copy after login

4. Digital clock exercise


    
    数字时钟
    
    
![](image/0.png)
![](image/0.png)
:
![](image/0.png)
![](image/0.png)
:
![](image/0.png)
![](image/0.png)

Copy after login

In-depth JavaScript timer

Delay prompt box

           07-延时提示框

Copy after login

Simplified code: merge two identical mouseover and mouseout

           07-延时提示框

Copy after login

6. Seamless scrolling

无缝滚动
向左走向右走
    
        ![](img2/1.jpg)
        ![](img2/2.jpg)
        ![](img2/3.jpg)
        ![](img2/4.jpg)

Copy after login

Believe After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!