网页设计与开发第四版7.5小实例
时间: 2023-10-08 07:09:44 浏览: 62
这是一个简单的网页设计和开发实例,用于显示当前时间和日期。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>实时时间和日期</title>
<meta charset="UTF-8">
</head>
<body>
<h1>实时时间和日期</h1>
<p id="time"></p>
<p id="date"></p>
<script src="script.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
function updateTime() {
var now = new Date();
var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
var date = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
document.getElementById("time").innerHTML = "现在的时间是:" + time;
document.getElementById("date").innerHTML = "今天是:" + date;
}
setInterval(updateTime, 1000);
```
说明:
1. HTML代码包含一个标题,两个段落和一个指向JavaScript文件的脚本标签。
2. JavaScript代码定义了一个名为updateTime的函数,它获取当前时间和日期,并将它们插入到HTML中的两个段落中。
3. setInterval函数每隔一秒钟调用一次updateTime函数,以便更新时间和日期。