案例分析：

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

别爱妹妹了

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

阅读量36

点赞数

本文链接：https://blog.csdn.net/m0_69190401/article/details/123973962

版权

HTML JavaScript DOM操作时间判断图片切换

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例分析:分时问候显示不同图片</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>
 
<body>
    < img src="images/morning.gif" alt="Good Morning">
    <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.gif';
            // 显示元素内容
            div.innerHTML = '亲，上午好，好好写代码';
        } else if (h < 18) {
            img.src = 'images/afternoon.gif';
            div.innerHTML = '亲，下午好，好好写代码'; // 元素对象的innerText和innerHTML
        } else {
            img.src = 'images/evening.gif';
            div.innerHTML = '亲，晚上好，好好写代码';
        }
    </script>
</body>
 
</html>

别爱妹妹了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例分析：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>.
复制链接

扫一扫