js中关于计时器的案例

来源：互联网发布：西安铁路局知乎编辑：程序博客网时间：2024/06/01 07:36

今天做了之前的练习，明白了setTimeout()和setInterval()的区别

setTimeout（“函数”，“毫秒数”） //未来的某时执行代码，只执行一次，例如5秒后执行这个函数，只执行一次

setInterval（”函数”,”毫秒数”）;//计时器，就是每隔一段时间就调用一次这个函数，

如果不停止这个计时器，就会一直执行；

clearInterval(计时器名称);//停止一个计时器

clearTimeout(计时器名称);//停止一个计时器

例如1：使用setTimeout(),使一个段落的内容3秒之后消失

<body>    <p id="p1">这段文字3秒之后消失</p></body><script>    //未来的某时执行代码    var timer = setTimeout("alarmClock()",3000);    function alarmClock(){        var p1 = document.getElementById("p1");        p1.innerHTML = "";    }</script>

执行之后可以看出，这段文字在3秒钟之后消失了，setTimeout()的含义就是在未来某时执行某段代码，

只执行一次，然后消失

我们再用setInterval()试试：

<body>    <p id="p1">这段文字<a id="test">3</a>秒之后消失</p></body><script type="text/javascript">    var i = 2;    var t = setInterval("fun()",1000);    function fun(){        if (i == 0) {            clearInterval(t);        }        var test = document.getElementById("test");        test.innerHTML = i;        i--;    }</script>

会发现，数字是动态的显示了，清除计时器之后，这段文字并不会消失。

我们将这两个计时器整合到一起，让setTimeout()控制3秒之后让这段文字消失，让setInterval()控制秒数动态的变化，来看看效果

<body>    <p id="p1">这段文字<a id="test">3</a>秒之后消失</p></body><script type="text/javascript">    var i = 2;    var t = setInterval("fun()",1000);    //未来的某时执行代码    var timer = setTimeout("alarmClock()",3000);    function alarmClock(){        var p1 = document.getElementById("p1");        p1.innerHTML = "";    }    function fun(){        if (i == 0) {            clearInterval(t);        }        var test = document.getElementById("test");        test.innerHTML = i;        i--;    }</script>

效果：

阅读全文

0 0