JavaScript从入门到精通（智能社）- 数字时钟

最新推荐文章于 2020-05-25 16:50:44 发布

knwceas

最新推荐文章于 2020-05-25 16:50:44 发布

阅读量220

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_42458302/article/details/105019674

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>       
    function toDou(n){ //空位补零 6 变成 06
	if(n<10) {
		return '0'+n;
	}
	else {
		return ''+n;
	}
}

window.onload=function(){
	var aimg=document.getElementsByTagName('img');

	function tick(){
        var oDate=new Date();
        //这里若没有提前定义而在srt直接使用无法成功跳转
        var iYear=oDate.getYear();
        var iMonth=oDate.getMonth();
        var iDay=oDate.getDate();
        var iHour=oDate.getHours();
        var iMin=oDate.getMinutes();
        var iSec=oDate.getSeconds();
        if(iYear<1900){
            iYear+=1900;
        }
	var str=''+iYear+' '+toDou(iMonth+1)+' '+toDou(iDay)+' '+toDou(iHour)+' '+toDou(iMin)+' '+toDou(iSec);
        // alert(aimg.length);
       
        for(var i=0;i<aimg.length;i++){	//获取图片地址
            if(i==4) {
                aimg[i].src='images/year.png';
                continue;
            }
            if(i==7) {
                aimg[i].src='images/month.png';
                continue;
            }
            if(i==10) {
                aimg[i].src='images/seven.png';
                continue;
            }

            if(i==13 || i==16){ // 加时间的冒号
                aimg[i].src='images/sign.png';
                continue;	
            }
            aimg[i].src="images/"+str.charAt(i)+".png"; //单双引号一样，注意str.charAt(i)不能加引号！！！
            // str[i]不能兼容ie
        }
	}
	setInterval(tick, 1000); //1000是1秒
	tick(); //除去延迟	
}
    </script>
</head>

<body style="background: black; color: white; font-size: 50px; margin: 200px 0; text-align: center; ">
    <div>
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/year.png">
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/month.png">
        <img src="images/0.png">
        <img src="images/0.png">
        <img src="images/seven.png"><br>
    </div>

    <div>
        <img src="images/0.png">
        <img src="images/0.png" >
        <img src="images/sign.png" /> 
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        <img src="images/sign.png" />
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">  
    </div>
  
</body>
</html>

结果：