JS - 分时问候

最新推荐文章于 2024-06-05 15:33:33 发布

铖Ch

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量314

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/chengenghc/article/details/123420660

版权

本文总结了一个JavaScript实现分时问候时遇到的问题，即在更新div内容时图片不显示。原因是文字直接放在div内，JS更改innerHTML时覆盖了图片。解决方案包括将文字包裹在元素中或把图片移出div外部。

摘要由CSDN通过智能技术生成

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分时问候</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>早上好</div>

    <script>
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '早上好，好好写代码哦~~';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.