【作业】页面显示4个颜色块、每隔1秒钟切换一张图片、浮动广告（页面中一张广告图片不断的变化位置）

最新推荐文章于 2024-08-30 20:29:15 发布

m-TT

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量133

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127668499

版权

该博客主要介绍了三个前端开发中的动态效果实现：1) 页面上展示了4个可以更换颜色的区块；2) 设计了一个每秒自动切换的图片展示功能；3) 实现了广告图片在页面中浮动并改变位置的效果，增加用户体验。

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

1.页面显示4个颜色块

<style>
    .box{
        width: 200px;
        height: 200px;
        float: left;
        border: 1px solid black;
        margin: 10px;
    }
</style>
<body id="all">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: red;"></div>
        <div class="box" style="background-color: blue;"></div>
        <div class="box" style="background-color: green;"></div>
        <script>
            let arr = ['yellow','red','blue','green']
            let box_color = document.querySelectorAll('.box')
            let body_bgcolor = document.getElementById('all')
            for (let i = 0; i < arr.length; i++) {