分时显示不同的图片，显示不同问候
<!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>
<body>
<div></div>
<img src="" alt="">
<script>
var img = document.querySelector('img')
var date = new Date()
var shijian = date.getHours()
var div = document.querySelector('div')
if (shijian < 12 && shijian >= 8) {
img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd5%2F1808%2F5e%2Ffaaf90fcb1b42db5.jpg_r_720x480x95_3e724ed9.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647609779&t=9d466211c1a880846610983b54dc4849'
div.innerHTML = '上午好'
} else if (shijian >= 12 && shijian < 18) {
img.src = "https://img1.baidu.com/it/u=1206705650,1887310874&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333"
div.innerHTML = '下午好'
} else {
img.src = "https://img2.baidu.com/it/u=3694296899,165687667&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
div.innerHTML = '晚上好'
}
</script>
</body>
</html>1、根据系统不同时间来判断，所以需要用到日期内置对象
2、利用多分支对象来设置不同的图片（判断小时数来修改图片和文字信息）
3、需要一个图片，并且更具时间来修改图片，就需要src属性
4、需要一个div元素，来修改内容显示问候语
