<html>
<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: 300px;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="" />
<div>上午好</div>
<script>
// 1. 获取元素
var img = document.querySelector("img");
var div = document.querySelector("div");
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = "img/1.jpg";
div.innerHTML = "早上好";
} else if (h < 18) {
img.src = "img/22.jpg";
div.innerHTML = "下午好";
} else {
img.src = "img/33.jpg";
div.innerHTML = "晚上好";
}
</script>
</body>
</html>