前言

在很多页面中，我们都可以看到一些倒计时或者和时间相关的效果，在js中有种定时器，分别是：setTimeout() 定时器； setInterval() 定时器

一、setTimeout() 定时器

语法：

window.setTimeout(调用函数, [延迟的毫秒数]);
1
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
例如：写一个页面，让一个蓝色盒子五秒爆炸变红
代码如下：

window.onload = function () {
var div = document.querySelector(‘div’);

       setTimeout(function () {
        div.style.backgroundColor = "red";
     },5000)
 }

二、setInterval() 定时器

语法：

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

1.window 可以省略
2。这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式
3.间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4.我们经常给定时器赋值一个标识符
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

例如：写一个页面，让一个蓝色盒子五秒爆炸变红
代码如下：
var str=[‘red’,‘skyblue’,‘tomato’,‘purple’,‘violet’];
window.onload = function () {
var div = document.querySelector(‘div’);
var timer=setInterval(function (){

    // setInterval( function()  {
        var index=Math.floor(Math.random()*5);
        div.style.backgroundColor = str[index]; 
    }, 2000);//让一个蓝色盒子两秒之后变成红色

三.消除setTimeout和 setInterval

语法：

var timer=setInterval(function (){
clearInterval(timer)