时钟demo

var hour = document.getElementsByClassName('hour')[0];
var min = document.getElementsByClassName('min')[0];
var sec = document.getElementsByClassName('sec')[0];

timer = setInterval(function(){
        var mydate = new Date();
        var timer = null;
        hour.innerHTML = zero(mydate.getHours());
        min.innerHTML  = zero(mydate.getMinutes());
        sec.innerHTML  = zero(mydate.getSeconds());
            
  },1000);

        function zero(a){
            if(a<10){
                a='0'+a;
            }else{
                a=''+a;
            }
            return a;
        }//给出现个位数的时候补零

效果图:
在这里插入图片描述
通过改变div里面的数值,直接通过innerHTML赋值进行的,还算简单。
老师的是一个数字对应一张图片,通过改变图片路径来显示对应的数字

 function zero(a){
            if(a<10){
                a='0'+a;
            }else{
                a=''+a;
            }
            return a;
        }
      
        var span1 = document.getElementsByClassName('span1')[0];
        var aimg =document.getElementsByTagName('img');
        setInterval(function(){
            var mydate = new Date();
            var str = zero(mydate.getHours())+zero(mydate.getMinutes())
                    +zreo(mydate.getSeconds());
            
            for(var i = 0; i<aimg.length; i ++){
                aimg[i].src='img/'+str[i]+'.png';
            }
            },1000);

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值