JavaScript定时器的相关操作

最新推荐文章于 2023-04-30 13:59:02 发布

chance2015

最新推荐文章于 2023-04-30 13:59:02 发布

阅读量1k

点赞数

分类专栏： JavaScript_DOM编程 JavaScript学习大全文章标签： javascript

本文链接：https://blog.csdn.net/chance2015/article/details/50487479

版权

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript学习大全

8 篇文章 4 订阅

订阅专栏

定时器的使用

setTimeout(‘操作’,毫秒)函数的操作

传入的两个参数为：第一个为操作，第二个为时间，单位为毫秒
功能实现:
5s后切换另一张图片
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <title>我的第一个网站</title>
</head>
<script type="text/javascript">
    function bom(){
        //得到节点
        var img=document.getElementsByTagName('img')[0];
        img.src="./second.png";
    }
    window.setTimeout('bom()',5000);
</script>
<body>
    <h1>定时器的操作</h1>
    <input type ="button" value="5"/> <br>
    <img src="./first.png" alt="">
</body>
</html>

其中first.png 和second.png这两张图片放在与html文件同目录下

setInterval(‘操作’,毫秒)函数的操作

介绍:
setInterval()函数传入的参数与setTimeout()函数相同，但是setInterval()函数是每隔多少秒执行一个操作，setTimeout()指的是隔多少秒进行一个操作，setInterval()是循环执行的，setTimeout()只执行一次
实例代码功能:
5s后切换图片，并且有倒计时

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <title>我的第一个网站</title>
</head>
<script type="text/javascript">
    function bom(){
        //得到节点
        var img=document.getElementsByTagName('img')[0];
        var ipt = document.getElementsByName('time')[0];
        var time=parseInt(ipt.value)-1;
        ipt.value=time;
        if(time==0){
            img.src="./second.png";
        }

    }
    window.setInterval('bom()',1000);
</script>
<body>
    <h1>定时器的操作</h1>
    <input type ="button" name = 'time' value="5"/> <br>
    <img src="./first.png" alt="">
</body>
</html>

定时器的清除

clearXXXXX()函数的使用

clear方法可以清除存在的计时器，不同的计时器调用清除方法名不同，但功能一致
setTimeout()方法使用clearTimeout()方法清除
setInterval()方法使用clearInterval()方法清除
代码如下:
5s后计时器变成0后不再往负数递减

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <title>我的第一个网站</title>
</head>
<script type="text/javascript">
    function bom(){
        //得到节点
        var img=document.getElementsByTagName('img')[0];
        var ipt = document.getElementsByName('time')[0];
        var time=parseInt(ipt.value)-1;
        ipt.value=time;
        if(time==0){
            img.src="./second.png";
            clearInterval(clock);
        }

    }
    var clock = window.setInterval('bom()',1000);
</script>
<body>
    <h1>清除定时器的操作</h1>
    <input type ="button" name = 'time' value="5"/> <br>
    <img src="./first.png" alt="">
</body>
</html>

setTimeout定时器实现循环使用

setTimeout计时器只能执行一次操作，这里我们将使用setTimeout计时器实现循环计时
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <title>我的第一个网站</title>
</head>
<script type="text/javascript">
    function bom(){
        //得到节点
        var img=document.getElementsByTagName('img')[0];
        var ipt = document.getElementsByName('time')[0];
        var time=parseInt(ipt.value)-1;
        ipt.value=time;
        if(time==0){
            img.src="./second.png";
            clearTimeout(clock);
        }
        else{
            window.setTimeout('bom()',1000)
        }

    }
    var clock = window.setTimeout('bom()',1000);
</script>
<body>
    <h1>循环定时器的操作</h1>
    <input type ="button" name = 'time' value="5"/> <br>
    <img src="./first.png" alt="">
</body>
</html>

chance2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器的相关操作

定时器的使用setTimeout(‘操作’,毫秒)函数的操作传入的两个参数为：第一个为操作，第二个为时间，单位为毫秒功能实现: 5s后切换另一张图片代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><meta http-equiv="Content-
复制链接

扫一扫