JavaScript-150：分时间问候并显示不同图片案例

根据系统不同事件来判断 所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片 并个根据事件修改图片 就需要用到操作元素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 = '亲 晚上好';
        }