设计一个Web 页面,要求页面中显示当前年、月、日、星期、时、分、秒等信 息。要求时间持续显示。
时间: 2023-09-30 20:02:46 浏览: 46
可以使用HTML、CSS和JavaScript来设计一个能够持续显示当前时间的Web页面。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>当前时间</title>
<style>
.container {
text-align: center;
font-size: 24px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<p id="date"></p>
</div>
<script>
// 获取当前时间并持续更新显示
function updateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// 星期的中文表示
var weekText = "";
switch (week) {
case 0:
weekText = "星期日";
break;
case 1:
weekText = "星期一";
break;
case 2:
weekText = "星期二";
break;
case 3:
weekText = "星期三";
break;
case 4:
weekText = "星期四";
break;
case 5:
weekText = "星期五";
break;
case 6:
weekText = "星期六";
break;
}
// 格式化时间
var timeText =
year +
"年" +
month +
"月" +
day +
"日 " +
weekText +
" " +
hour +
":" +
minute +
":" +
second;
// 更新显示时间
document.getElementById("date").textContent = timeText;
}
// 每秒更新时间
setInterval(updateTime, 1000);
</script>
</body>
</html>
```
将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,页面上将持续显示当前的年、月、日、星期、时、分、秒等信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)