js 数码时间

最新推荐文章于 2020-07-14 14:12:07 发布

lbeller

最新推荐文章于 2020-07-14 14:12:07 发布

阅读量165

点赞数

文章标签： js

本文链接：https://blog.csdn.net/lbeller/article/details/84665674

版权

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷数码钟表 - 妙味课堂 - www.miaov.com</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" /> 
</head>
<style>
        .time{
            color: #fff;
            font-size: 30px;
            font-weight: bold
        }
    </style>
<body> 
<div id="clock" class="date">
    <div class="time">
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <span>:</span>
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
      <span>:</span>
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" />
        <img class="num" src="images/0.png" alt="0" longdesc="http://www.miaov.com" /> 
    </div> 
</div>
<script>
function toDouble(num){//补全时间为双数显示
    if(num<10){//当 小时  分 秒 他们显示的数字小于10时，在前面添加0
        return "0" + num;
    }else{
        return "" + num;
    }
}
 window.onload = function(){
     var oBtn = document.getElementById("btn");
     var aImg = document.getElementsByTagName("img");

    function upTime(){
         for(var i=0; i<aImg.length; i++){
            var oDate = new Date();//获取新时间
            var str = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds());
            //oDate.getHours() + oDate.getMinutes() + oDate.getSeconds();  等于是数字相加  得在最前加 "" +
            //console.log(str)
            aImg[i].src = "images/"+str.charAt(i)+".png"; //charAt 获取字符串中的索引
          }
    }
    //开户定时器，1秒跳动一次
    setInterval(upTime, 1000);

    //防止刷新页面时 显示00：00：00初始初
    upTime();
 }
</script>
</body>
</html>