JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。

最新推荐文章于 2024-03-01 11:42:13 发布

叫我魏什么

最新推荐文章于 2024-03-01 11:42:13 发布

阅读量632

点赞数 1

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127820188

版权

1.JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。

<style>
    .colorChange {
        width: 100px;
        height: 100px;
        display: inline-block;
        border: 1px solid black;
    }

    .colorChange:nth-of-type(1) {
        background-color: aqua;
    }

    .colorChange:nth-of-type(2) {
        background-color: chartreuse;
    }

    .colorChange:nth-of-type(3) {
        background-color: cornflowerblue;
    }

    .colorChange:nth-of-type(4) {
        background-color: darkturquoise;
    }



    #imgSiteChange {
        position: fixed;
    }
</style>

<body>
    <div class="colorChange"></div>
    <div class="colorChange"></div>
    <div class="colorChange"></div>
    <div class="colorChange"></div>
    <script>
        // 1、 鼠标进入某个色块，页面背景变成该颜色
        let arr = ['aqua', 'chartreuse', 'cornflowerblue', 'darkturquoise']
        let colorChange = document.querySelectorAll('.colorChange')
        for (let i = 0; i < colorChange.length; i++) {
            colorChange[i].addEventListener('mouseover', () => {
                console.log(this.backgroundColor);
                document.body.style.backgroundColor = arr[i];
            })
            colorChange[i].addEventListener('mouseout', () => {
                document.body.style.backgroundColor = '#fff';
            })
        }
   </script>

2.简易的轮播图，几张图片每隔1秒自动切换



    <img id="imgShow" src="./img/afternoon.jpg" alt="">
    <script>

        // 2、 自动切换图片
        let imgShow = document.getElementById('imgShow');
        let newArr = ['./img/afternoon.jpg', './img/evening.jpg', './img/morning.jpg'];
        let i = 0;
        setInterval(() => {
            imgShow.src = newArr[i];
            i++;
            if (i == newArr.length) {
                i = 0;
            }
        }, 1000)

    </script>

3.浮动广告：一张图片每隔一秒随机出现在页面的某个位置，当点击图片时图片消失

<style>
    #imgSiteChange {
        position: fixed;
    }
</style>

<body id="body">
    <img id="imgSiteChange" src="./img/img04.jpg" alt="">
    <script>
        // 3、浮动广告
        let temp;
        let imgSiteChange = document.getElementById('imgSiteChange')
        temp = setInterval(() => {
            let randomWid = Math.floor(Math.random() * (window.innerWidth - 320));
            let randomHig = Math.floor(Math.random() * (window.innerHeight - 203));
            imgSiteChange.style.top = randomHig + 'px';
            imgSiteChange.style.left = randomWid + 'px';
        }, 1000);
        imgSiteChange.onclick = function() {
            imgSiteChange.removeAttribute('src');
            clearInterval(temp);
        }

    </script>
</body>

</html>