简单的数字时钟
# 简单的数字时钟
**知识点**
1. window.onload 事件
2. Date 日期对象
3. setTimeout() 延迟函数
---------------------------------
## 1. window.onload 事件
当页面加载完成时,自动调用
---------------------------------
## 2. Date()
`new Date()`: 返回当前的日期的字符串表示
---------------------------------
## 3. setTimeout()
`setTimeout(function(){...},2000)`: 延迟执行函数
---------------------------------------------------------
### 示例: code/demo7.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的数字时钟</title>
<style>
#clock {
font-size: 24px;
font-weight: bolder;
background-color: lightblue;
padding: 10px;
border-radius: 10px;
box-shadow: 2px 2px #999;
}
</style>
</head>
<body>
<h2>数字时钟</h2>
<span id="clock"></span>
<script>
function displayTime() {
let clock = document.getElementById('clock');
// 获取当前时间
let now = new Date();
// 根据本地时间把 Date 对象的时间部分转换为字符串
clock.innerHTML = now.toLocaleTimeString();
// 一秒后执行该函数
setTimeout(displayTime, 1000);
}
window.onload = displayTime; // 页面加载完成时自动执行
</script>
</body>
</html>
```
