javascript之定时器的使用

一：什么是定时器

（一）无限循环定时器

<script>
    window.onload = function(){
       function test(){
           alert("test")
       }
        // 无限循环的执行函数test,间隔时间为2秒    
       setInterval(test,2000);
    }
</script>

（二）不循环执行定时器

<script>
    window.onload = function(){
       function test(){
           alert("test")
       }
        // 2秒后，执行test函数，只执行一次   
        setTimeout(test,2000);
    }
</script>

（三）开关定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器</title>

<script>
    window.onload = function(){
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");
        // 控制匿名函数
        var timer = null;
        oBtn1.onclick = function(){

            timer = setInterval(function(){
                alert("haha");
            },3000)
        }
        oBtn2.onclick = function(){
            clearInterval(timer);
        }
    }
</script>

</head>
<body>
    <input type="button" id="btn1" value="开启">
    <input type="button" id="btn2" value="关闭">
</body>
</html>

数码时钟

# 自己思路的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字时钟</title>
<style>
body{
    font-size: 150px;
    background:gray;
}
img{
    width: 100px;
    height: 100px;
}
</style>

<script>
    window.onload = function(){
        var oData = new Date();
        var h = oData.getHours().toString();
        var m = oData.getMinutes().toString();
        var s = oData.getSeconds().toString();
        var oImg = document.getElementsByTagName("img")
        function set(){
           oImg[0].src = "pic/数字" + h[0] + ".png"
           oImg[1].src = "pic/数字" + h[1] + ".png"
           oImg[2].src = "pic/数字" + m[0] + ".png"
           oImg[3].src = "pic/数字" + m[1] + ".png"
           if(s.length==1){
                oImg[4].src = "pic/数字0"+".png"
                oImg[5].src = "pic/数字" + s[0]+".png"
           }else{
                oImg[4].src = "pic/数字" + s[0] + ".png"
                oImg[5].src = "pic/数字" + s[1] + ".png"
           }
        }
        set();
    }
    setInterval(window.onload,1000);
</script>

</head>
<body>
    <img src="" alt="">
    <img src="" alt="">
    :
    <img src="" alt="">
    <img src="" alt="">
    :
    <img src="" alt="">
    <img src="" alt="">

</body>
</html>

# TODO

javascript之定时器的使用

猜你喜欢