devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WEB开发---使用HTML CSS开发网页实时显示当前日期和时间

作者：盐析白兔 | 2024-08-29 06:12:39

赞

踩

WEB开发---使用HTML CSS开发网页实时显示当前日期和时间

自己刚开始学习html css知识，临时做个网页，实时显示当前日期和时间功能。

代码如下：
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示当前日期和时间</title>

    <style>
        html, body {
            /* 设置高度为100% */
            height: 100%;
            /* 设置外边距为0 */
            margin: 0;
            /* 设置为弹性布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }

        .content {
            text-align: center;/* 文本居中对齐 */
            font-size: 60px;/* 字体大小为60px*/
            color: #0099ff;/* 字体颜色为蓝色 */
        }

        .time-font{
            font-size: 90px; /* 设置字体大小为90px */
            font-weight: bold; /* 设置字体加粗 */
        }
      </style>


    <script>
        /* 更新日期和时间函数 */
        function updateDateTime() {
            // 定义星期数组
            var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            // 获取当前时间
            var now = new Date();

            // 获取当前年份
            var year = now.getFullYear();
            // 获取当前月份，月份是从0开始的，所以需要加1
            var month = now.getMonth() + 1; 
            // 获取当前日期
            var day = now.getDate();
            // 获取当前星期
            var weekday = weekdays[now.getDay()];

            // 如果月份小于10，则在前面补0
            if (month < 10) month = '0' + month;
            // 如果日期小于10，则在前面补0
            if (day < 10) day = '0' + day;

            // 组合日期字符串
            var date = year + '年' + month + '月' + day + '日 ' + weekday;
            //console.log(date);
            // 将日期字符串显示在页面上
            document.getElementById('date').innerHTML = date;

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

            // 如果小时小于10，则在前面补0
            if (hours < 10) hours = '0' + hours;
            // 如果分钟小于10，则在前面补0
            if (minutes < 10) minutes = '0' + minutes;
            // 如果秒小于10，则在前面补0
            if (seconds < 10) seconds = '0' + seconds;

            // 组合时间字符串
            var time = hours + ':' + minutes + ':' + seconds;
            //console.log(time);
            // 将时间字符串显示在页面上
            document.getElementById('time').innerHTML = time;
        }

        // 每秒更新一次日期和时间
        setInterval(updateDateTime, 1000); 
    </script>

</head>
<body onload="updateDateTime()">
    <div class="content">
        <!-- 将日期和时间分别放在两个不同的段落中 -->
        <p id="date"></p>    
        <!-- 将时间放在一个带有特定类名的段落中 -->
        <p id="time" class="time-font"></p> 
    </div>
</body>
</html>

在浏览器中运行，效果如下：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/1022057
推荐阅读