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

  • 相关阅读:
    oracle proc 插入操作性能优化实践
    vmware 虚拟机共享文件夹无法显示问题解决
    oracle启动报错:ORA-03113
    c语言中sprintf()函数中的%使用
    c 的内存分配
    c实现队列
    c实现循环链表
    MantisBT导出Excel文件名显示中文的修改方法
    怎样通过Qt编写C/C++代码查询当前Linux的版本号?
    Kotlin Android Extensions: 与 findViewById 说再见 (KAD 04) -- 更新版
  • 原文地址:https://www.cnblogs.com/lize1215/p/7636411.html
Copyright © 2011-2022 走看看