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