<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
</head>
<body>
<img src="images_10/zao.jpeg" alt="早上好">
<div>上午好</div>
<!-- 案例:分时显示不同图片,显示不同问候语
根据不同时间,页面显示不同图片,同时显示不同的问候语
如果是上午时间打开页面,显示上午好,显示上午的图片
如果是下午时间打开页面,显示下午好,显示下午的图片
如果是晚上时间打开页面,显示晚上好,显示晚上的图片 -->
<!-- 案例分析:
1.根据系统不同的时间来判断,所以需要用到日期内置对象
2.利用多分支语句来设置不同的图片
3.需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
4.需要一个dir元素，显示不同问候语,修改元素内容即可 -->
<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_10/zao.jpeg';
div.innerHTML = '亲,早上好,好好敲代码';
}else if (h < 18){
img.src = 'images_10/xia.gif';
div.innerHTML = '亲,下午好,好好敲代码';
}else{
img.src = 'images_10/wan.jpg';
div.innerHTML = '亲,晚上好,好好敲代码';
}
</script>
</body>
</html>
当然，你还需要重新建一个包含照片的文件夹，并且与案例.html位于同一路径上