zoukankan      html  css  js  c++  java
  • 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 文件夹下面

  • 相关阅读:
    2015 年最受 Linux 爱好者欢迎的软硬件大盘点
    Java 9终于要包含Jigsaw项目了
    Linux 容器技术史话:从 chroot 到未来
    开发者最常用的 8 款 Sublime Text 3 插件
    60,000毫秒内对Linux的性能诊断效的方法
    bzoj 2595 [Wc2008]游览计划(斯坦纳树)
    bzoj 3997 [TJOI2015]组合数学(DP)
    bzoj 1014 [JSOI2008]火星人prefix(splay+hash)
    bzoj 1090 [SCOI2003]字符串折叠(区间DP)
    bzoj 1537 [POI2005]Aut- The Bus(DP+BIT)
  • 原文地址:https://www.cnblogs.com/lize1215/p/7636411.html
Copyright © 2011-2022 走看看