操作元素经典练习:早中晚问候语

实现目标

QQ图片20201123164205.png

案例分析

  1. 根据系统的不同时间来判断,所以需要调用日期内置对象
  2. 利用多分支语句来设置不同的图片
  3. 需要一个图片,并根据时间修改图片,就需要用到操作元素src属性
  4. 需要一个div元素,显示不同的问候语,修改元素内容即可

代码演示

<body>
    <img src="images/morning.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 = 'images/morning.jpg';
            div.innerHTML = '亲,上午好,赶紧写代码'
        } else if (h < 18) {
            img.src = 'images/noon.jpg';
            div.innerHTML = '亲,中午好,好好写代码'
        } else {
            img.src = 'images/afternoon.jpg';
            div.innerHTML = '亲,下午好,玩命写代码'
        }

    </script>
</body>
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容