自己刚开始学习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>
在浏览器中运行，效果如下：
