分时间问候案例-js练习

最新推荐文章于 2023-10-18 22:11:07 发布

bug生产机器

最新推荐文章于 2023-10-18 22:11:07 发布

阅读量703

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48472209/article/details/126694506

版权

 <!-- 根据系统不同时间来判断，所以需要用到日期内置对象
        利用多分支语句来设置不同的图片
        需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        需要一个div元素，显示不同问候语，修改元素内容即可
     -->
 <img id="hello" src="photo1.png" alt=""></img>
    <div id="div1">大家上午好</div>
 <script>
          
            var img1 = document.getElementById('hello');
            var div1 = document.getElementById('div1');

            var date = new Date();
            var h = date.getHours();
         
            if(h < 12){
                img1.src = 'photo1.png';//上午图片
                div1.innerHTML = '早上好';
            }else if(h < 18){
                img1.src = 'photo2.jpg';//上午图片
                div1.innerHTML = '下午好';
            }else{
                img1.src = 'photo2.jpg';//上午图片
                div1.innerHTML = '晚上好';
            }
    
    </script>