根据系统不同事件来判断 所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片 并个根据事件修改图片 就需要用到操作元素src属性
需要一个div元素 显示不同问候语 修改元素内容即可
样式
img {
width: 300px;
height: 300px;
}
结构
<img src="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3" alt="">
<div>上午好</div>
JS
// 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 = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3';
div.innerHTML = '亲 上午好';
} else if (h < 18)
{
img.src = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a422a0c62f56684521';
div.innerHTML = '亲 下午好';
} else
{
img.src = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300';
div.innerHTML = '亲 晚上好';
}