js动态案例1

最新推荐文章于 2022-04-02 21:27:14 发布

pumpkin_truck

最新推荐文章于 2022-04-02 21:27:14 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/111066736

版权

js动态案例1

题目：分时问候案例（分时显示不同图片以及不同的问候语）

<body>
    <img src="img/iu.jpg" alt="">
    <div>上午好</div>
    <script>
        //根据系统时间来变化图片和文字
        //第一步，获取元素
        var img = document.querySelector('img')
        var div = document.querySelector('div')
            //第二步，得到当前系统时间的小时数
        var data = new Date();
        var h = data.getHours();
        //判断时间周期，确定时间范围的图片和文字
        if (h < 12) {
            img.src = 'img/iu.jpg'
            div.innerHTML = '上午好'
        } else if (h < 18) {
            img.src = 'img/iu2.jpg'
            div.innerHTML = '下午好'

        } else {
            img.src = 'img/iu7.jpg'
            div.innerHTML = '晚上好'
        }
    </script>
</body>

运行效果：
在这里插入图片描述
2、更换背景
点击小盒子中的照片后，背景图片依次变换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            margin: auto;
            margin-top: 50px;
        }
        
        img {
            width: 80px;
            height: 100px;
        }
        
        ul li {
            list-style: none;
            width: 100px;
            height: 100px;
            float: left;
        }
        
        body {
            background-image: url('iu2.jpg');
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>
            <img src="iu2.jpg" alt="">
        </li>
        <li><img src="iu3.jpg" alt=""></li>
        <li>
            <img src="iu4.jpg" alt="">
        </li>
        <li><img src="iu5.jpg" alt=""></li>
    </ul>
    <script>
       //获取元素
        var imgs = document.querySelector('.box').querySelectorAll('img')
        console.log('imgs')
        //使用循环点击 图片更换背景
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgrandImage = 'url(' + this.src + ')'
            }

        }
    </script>
</body>

</html>

pumpkin_truck

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js动态案例1

js动态案例1题目：分时问候案例（分时显示不同图片以及不同的问候语）<body> <img src="img/iu.jpg" alt=""> <div>上午好</div> <script> //根据系统时间来变化图片和文字 //第一步，获取元素 var img = document.querySelector('img') var div = documen
复制链接

扫一扫