zoukankan      html  css  js  c++  java
  • 数字时钟小插件

    学习js中----今天试着写了下数字时钟。

    html代码如下:

    <body style="font-size:50px;background:black;color:#fff;">

    <img src="img/1.png">
    <img src="img/4.png">
    :
    <img src="img/0.png">
    <img src="img/6.png">
    :
    <img src="img/5.png">
    <img src="img/9.png">
    </body>

    js代码如下

    function toDou(n) {
    if(n<10){
    return "0"+n;
    }else{
    return n;
    }
    }
    window.onload=function(){
    function clock(){
    var aImg=document.getElementsByTagName("img");
    var oDate=new Date();
    var h=oDate.getHours();
    var m=oDate.getMinutes();
    var s=oDate.getSeconds();
    var str=''+toDou(h)+toDou(m)+toDou(s);

    for(var i=0;i<aImg.length;i++)
    aImg[i].src="img/"+str.charAt(i)+".png";
    }
    clock();
    setInterval(clock, 1000);
    }

    img如下(自己下载下来链接上吧。)

     

  • 相关阅读:
    复习HTML/CSS 3
    复习HTML/CSS2
    复习HTML/CSS1
    HTML/CSS8
    HTML/CSS7
    HTML/CSS6
    9.5Html
    9.4Html
    面向对象
    作用域以及类、实例
  • 原文地址:https://www.cnblogs.com/web-leader/p/4185180.html
Copyright © 2011-2022 走看看