分享好友 教程首页 教程搜索 频道列表

js实现刷新网页更换背景图

2022-06-28 14:522400
+关注30
核心提示:用代码测试

这个一般用于会员登录页面。刷新一次变一次背景大图,代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            height: 100%;
        }
        body {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 100%;
        }
    </style>
</head>
<body>
</body>
<script>
    let imgArr = ["https://iknow-base.cdn.bcebos.com/qixiqbpcbanner.jpg", "https://iknow-base.cdn.bcebos.com/%E9%BB%84%E5%9C%A3%E4%BE%9D%E7%89%A9%E6%96%99%2Fqb%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE%E9%BB%84%E5%9C%A3%E4%BE%9D270x170x2.jpg", "https://iknow-base.cdn.bcebos.com/trishafish%2F%E7%9F%A5%E9%81%93PC-QB-540-280.jpg"];  //图片数据
    let num = 0;
    let setNum = localStorage.getItem("num");
    if (setNum) {
        num = setNum
    }
    console.log(imgArr[num]);  //日志
    document.body.style.backgroundImage = "url(" + imgArr[num] + ")"
    if (num == imgArr.length - 1) {
        num = 0;
    } else {
        num++;
    }
    localStorage.setItem("num", num)
</script>
</html>


本文标签: #背景 #图片 #刷新
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

如何生成背景透明的微信小程序二维码

    如何生成背景透明的微信小程序二维码透明背景参数is_hyaline 是否需要透明底色, is_hyaline 为true时,生成透明底色的小程序码

网络转载 开发技术2023-04-13

前端用js实现网页换肤功能

    今天给大家分享一下js如何实现网页换肤功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获

小黑 JavaScript教程2022-09-10

css设置背景图片模糊,内容不模糊

    内容来源于网络,请用代码测试

网络转载 CSS教程2022-08-28

swiper根据图片切换不同的背景色

    用代码测试

网络转载 JavaScript教程2022-05-25

css3 的background 渐变

小黑 CSS相关2019-07-03

下一篇
我来说两句
抢沙发