HTML制作一个会动的电子钟

最新推荐文章于 2024-08-10 23:55:00 发布

JayceHarris

最新推荐文章于 2024-08-10 23:55:00 发布

阅读量1.4k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/HarrisJayce/article/details/111655641

版权

这个博客展示了一个使用HTML、CSS和JavaScript实现的实时电子时钟和日期显示。页面中，时间与日期会每秒自动更新，确保始终显示当前的小时、分钟、秒数以及年、月、日和星期。代码主要通过JavaScript的Date对象获取时间信息，并用CSS进行布局和样式设计。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
                                initial-scale=1,maximum-scale=1,user-scalable=no">-->
    <title>电子时钟</title>
    <style>
        body {
            /*给一个元素中设置overflow:hidden，
            那么该元素的内容若超出了给定的宽度和高度属性，
            那么超出的部分将会被隐藏，不占位。*/
            overflow: hidden;
        }

        .box {
            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 500px;
            height: 300px;
            margin: auto;
            text-align: center;
            border :1px solid black;
        }

        .time {
            font-size: 100px;
            font-family: Digital Dismay,serif;
        }

        .date {
            font-size: 30px;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="time">09:41:00</div>
    <div class="date">2020年12月31日 星期四</div>
</div>


<script>
    var time = document.querySelector('.time');
    var date = document.querySelector('.date');

    function updatedTime() {
        var now = new Date();

        //获取时分秒
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        time.innerHTML = perfix0(hours) + ':' + perfix0(minutes) + ':' + perfix0(seconds);

        //获取年月日
        var year = now.getFullYear();
        var month = now.getMonth();
        var day = now.getDate();

        var week = now.getDay();
        date.innerHTML = year + '年' + perfix0(month) + '月' + perfix0(day) + '日' + getWeek(week);
    }

    updatedTime();
    setInterval(updatedTime, 1000);

    // 添加前缀0
    function perfix0(n) {
        return n < 10 ? '0' + n : n;
    }

    // 获取星期
    function getWeek(n) {
        switch (n) {
            case 0:
                return '星期日';
            case 1:
                return '星期一';
            case 2:
                return '星期二';
            case 3:
                return '星期三';
            case 4:
                return '星期四';
            case 5:
                return '星期五';
            case 6:
                return '星期六';
        }
    }
</script>
</body>
</html>