欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS-数字时钟

程序员文章站 2022-05-28 09:01:14
...

先看下效果

JS-数字时钟

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<div>
    <ul id="date">
        <img src="img/0.png">
        <img src="img/0.png">
        <img src="img/0.png">
        <img src="img/0.png">
        <span>年</span>
        <img src="img/0.png">
        <img src="img/0.png">
        <span>月</span>
        <img src="img/0.png">
        <img src="img/0.png">
        <span>日</span>
    </ul>
    <ul id="week">
        <span>星期</span>
    </ul>
    <ul id="time">
        <img src="img/0.png">
        <img src="img/0.png">
        <span>:</span>
        <img src="img/0.png">
        <img src="img/0.png">
        <span>:</span>
        <img src="img/0.png">
        <img src="img/0.png">
    </ul>

</div>
<script rel="script" src="js/index.js" type="text/javascript"></script>
</body>
</html>

2.CSS

* {
    margin: 0;
    padding: 0
}
body{
    width: 100%;
    height: 100%;
    background: grey;
}

div{
    width: 500px;
    height: 300px;
    position: absolute;
    top:50%;
    left:50%;
    margin: -150px 0 0 -250px;
}
#date{
    width: 100%;
    height: 33%;
    position: relative;
    top: 0%;
    left: 15%;
    display: inline-block;
}
#week{
    width: 100%;
    height: 33%;
    position: relative;
    display: inline-block;
    left: 40%;
}

#time{
    width: 100%;
    height: 50%;
    position: relative;
    display: inline-block;
    left: 25%;
}

span{
    color: white;
    font-size: x-large;
}


3.JS

window.onload = function () {
    setInterval(a=function () {
        //獲取對象
        var oUlDate = document.getElementById('date');
        var oImgsForDate = oUlDate.getElementsByTagName('img');
        var oUlTime = document.getElementById('time');
        var oImgsForTime = oUlTime.getElementsByTagName('img');
        var oUlWeek = document.getElementById('week');
        //获取时间
        var oDate = new Date();
        var h = addPreZero(oDate.getHours());
        var m = addPreZero(oDate.getMinutes());
        var s = addPreZero(oDate.getSeconds());
        var sTime = h+m+s;
        //日期
        var yyyy = oDate.getFullYear();
        var mm = oDate.getMonth()+1;
        var dd = oDate.getDate();
        var sDate = yyyy+addPreZero(mm)+addPreZero(dd);

        //星期
        var d = oDate.getDay();
        var sDay;
        switch (d){
            case 0:
                sDay='星期日';
                break;
            case 1:
                sDay='星期一';
                break;
            case 2:
                sDay='星期二';
                break;
            case 3:
                sDay='星期三';
                break;
            case 4:
                sDay='星期四';
                break;
            case 5:
                sDay='星期五';
                break;
            case 6:
                sDay='星期六';
                break;
        }

        //设置日期和时间
        for(var j = 0;j<oImgsForDate.length;j++){
            oImgsForDate[j].src='img/'+sDate.charAt(j)+'.png';
        }
        oUlWeek.innerHTML='<span>'+sDay+'</span>';
        for(var i = 0;i<oImgsForTime.length;i++){
            oImgsForTime[i].src='img/'+sTime.charAt(i)+'.png';
        }

    }, 1000);
    a();
}

function addPreZero(n) {
    if (n < 10) {
        return '0' + n;
    } else {
        return '' + n;
    }
}



相关标签: JS 时钟