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 文件夹下面

  • 相关阅读:
    [转]Putty中文乱码解决方法
    linux内核编译
    grub2的使用
    linux的简单网络配置
    [转]建立swap分区
    [转]ps/2键盘线序识别方法
    Linux下备份系统至另一硬盘
    [转]Vimium快捷键
    [转] C中的位域
    [转]diskpart命令
  • 原文地址:https://www.cnblogs.com/lize1215/p/7636411.html
Copyright © 2011-2022 走看看