案例分析
<!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: 300px;
}
</style>
</head>
<body>
<img src="images/morning.gif" 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 = 'images/morning.jpg';
div.innerHTML = '上午好，我要好好写代码';
} else if (h < 18) {
img.src = 'images/afternoon.jpg';
div.innerHTML = '下午好，要好好写代码';
} else {
img.src = 'images/night.jpg';
div.innerHTML = '晚上好，要好好写代码';
}
</script>
</body>
</html>
