要求
根据不同时间，页面显示不同图片，同时显示不同的问候语。
- 如果上午时间打开页面，显示上午好，显示上午的图片。
- 如果下午时间打开页面，显示下午好，显示下午的图片。
- 如果晚上时间打开页面，显示晚上好，显示晚上的图片。
分析
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
- 需要一个div元素，显示不同问候语，修改元素内容即可
代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img {
width: 800px;
}
body {
text-align: center;
}
</style>
<body>
<img src="swh.jpeg" alt="">
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if (h < 12) {
img.src = 'swh,jpeg';
div.innerHTML = '亲，上午好，好好写代码吧！';
} else if (h < 18) {
img.src = 'xwh.jpeg';
div.innerHTML = '亲，下午好，继续写代码吧！';
} else {
img.src = 'wsh.jpeg';
div.innerHTML = '亲，晚上好，冲一下放松吧！';
}
</script>
</body>
</html>
