//根据系统不同时间判断,需要用到日期内置对象
//利用分支语句设置不同图片
//修改img元素的src属性
//需要一个div显示问候语,跟随时间修改元素内容
<!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>
<style>
img {
width: 200px;
height: 160px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<img src="./image/上午.jpg" alt="#">
<div>上午好</div>
<script>
var div = document.querySelector('div');
var img = document.querySelector('img');
var date = new Date();
var h = date.getHours();
if (h < 10) {
img.src = './image/上午.jpg';
div.innerHTML = '上午好~';
} else if (h < 13) {
img.src = './image/中午好.png';
div.innerHTML = '中午好~';
} else if (h < 18) {
img.src = './image/下午好.png';
div.innerHTML = '下午好~';
} else if (h < 24) {
img.src = './image/晚上好.gif';
div.innerHTML = '晚上好~';
}
// alert(h);//检查是否获取到时间
</script>
</body>
</html>