JS-数字时钟

最新推荐文章于 2021-09-21 18:03:47 发布

Deng_1957

最新推荐文章于 2021-09-21 18:03:47 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： JS 时钟

本文链接：https://blog.youkuaiyun.com/truesword/article/details/79228203

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

先看下效果

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;
    }
}