当前位置：首页 > news >正文

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

news 2025/8/15 14:59:45

自己刚开始学习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开始的，所以需要加1var month = now.getMonth() + 1; // 获取当前日期var day = now.getDate();// 获取当前星期var weekday = weekdays[now.getDay()];// 如果月份小于10，则在前面补0if (month < 10) month = '0' + month;// 如果日期小于10，则在前面补0if (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，则在前面补0if (hours < 10) hours = '0' + hours;// 如果分钟小于10，则在前面补0if (minutes < 10) minutes = '0' + minutes;// 如果秒小于10，则在前面补0if (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>