设计一个Web页面,要求页面中显示当前年、月、日、星期、时、分、秒等信息。要求时间持续显示。
时间: 2023-09-30 17:02:46 浏览: 27
好的,我可以帮你设计一个Web页面来显示当前的年、月、日、星期、时、分、秒等信息,并且让时间持续显示。以下是一个示例的HTML、CSS和JavaScript代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>当前时间</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="clock"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码 (style.css):
```css
#clock {
font-size: 48px;
text-align: center;
margin-top: 200px;
}
```
JavaScript代码 (script.js):
```javascript
function updateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var weekDay = now.toLocaleDateString('en-US', { weekday: 'long' });
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var clockElement = document.getElementById('clock');
clockElement.innerHTML = year + '-' + month + '-' + day + ' ' + weekDay + ' ' + hours + ':' + minutes + ':' + seconds;
setTimeout(updateTime, 1000);
}
updateTime();
```
将以上代码保存为三个文件:index.html、style.css和script.js,并确保它们在同一个文件夹中。然后通过浏览器打开index.html,你将看到一个页面显示当前的年、月、日、星期、时、分、秒信息,并且时间会持续更新显示。
相关推荐
![](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)