• js定时器 数码时钟


    开启定时器:  两种方式

    setInterval(函数名,间隔时间)         间隔型

    setTimeout(函数名,间隔时间)       延时型

    示例1

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>无标题</title>
    <script>
    function show(){
    alert("a");
    }
    setInterval(show,1000);
    </script>
    <body>
    </body>
    </html>

    ``````````````````````````````````````````

    示例2

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>无标题</title>
    <script>
    function show(){
    alert("a");
    }
    setTimeout(show,1000);
    </script>
    <body>
    </body>
    </html>

    ·········································

    关闭定时器:

    clearInterval

    clearTimeout

    示例3

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>无标题</title>
    <script>
    window.onload=function(){
    var obtn1 = document.getElementById('btn1');
    var obtn2 = document.getElementById('btn2');
    var schedule1 = null;
    obtn1.onclick=function(){
    alert("aa");
    schedule1 = setInterval(function(){
    alert("schedule1 is running");

    },1000);
    };
    obtn2.onclick=function(){
    clearInterval(schedule1);

    };
    }
    </script>
    <body>
    <div>

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

    ``````````````````````````````````````````````````````````

    示例:数码时钟

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>无标题</title>
    <script>
    window.onload=function(){
    var imgs = document.getElementsByTagName('img');

    function toDouble(n){
    if(n<10){
    return '0'+n;
    }else{
    return ''+n;
    }
    }
    function watch(){
    var oDate = new Date();
    var str = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds());
    for(var i = 0 ; i < imgs.length;i++){

    imgs[i].src = "images/" +str[i]+ ".png";               // str[i]   也可以用   str.charAt(i)
    }
    }


    setInterval(watch,1000);
    watch();
    }
    </script>
    <body style="background:black; color:white; font-size=50px;" >

    <img src="images/0.png"/>
    <img src="images/0.png"/>
    :
    <img src="images/0.png"/>
    <img src="images/0.png"/>
    :
    <img src="images/0.png"/>
    <img src="images/0.png"/>

    </body>
    </html>

    //图片自己找个 从 1-9的图片吧  放在 image 文件夹下面

  • 相关阅读:
    VBA中使用计时器的两种方法
    好的关卡离不开优秀的团队
    如何从无到有做一个好关卡?
    性能优化总结
    用超链接提交表单,实现在动态网页的url中隐藏参数
    js 中使用el表达式 关键总结:在js中使用el表达式一定要使用双引号
    js中getBoundingClientRect的作用及兼容方案
    IE10、IE11和Microsoft Edge的Hack
    CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
    点击a标签,跳转到iframe中,并在iframe中显示指定的页面
  • 原文地址:https://www.cnblogs.com/lize1215/p/7636411.html
Copyright © 2020-2023  润新知