更换博客背景1.0版本（随机背景）

提前声明

要想完成这个功能你必须会前端三大件（html,css,js）的基础知识，不然你就只能照搬作者的代码，但是里面的内容你是看不懂的哦！！！

自建与引入css与js文件

相信大家应该已经学会了这个步骤了，如果不会的请先移步这篇文章自定义css与js

js的代码

var arrImg=['https://www.toopic.cn/public/uploads/small/1634204095151163420409592.jpg','https://www.toopic.cn/public/uploads/small/163420343597163420343525.jpg','https://www.toopic.cn/public/uploads/small/1642752073265164275207379.jpg','https://www.toopic.cn/public/uploads/small/1642751728155164275172815.jpg','https://www.toopic.cn/public/uploads/small/1642751487281164275148774.png','https://www.toopic.cn/public/uploads/small/1642751473324164275147339.png','https://www.toopic.cn/public/uploads/small/164275143227816427514329.png','https://www.toopic.cn/public/uploads/small/1642751024946164275102446.jpg','https://www.toopic.cn/public/uploads/small/1642750988739164275098839.jpg']
var a=document.querySelector('.full_page')
var b=document.querySelector('.menus_item')
var c=document.querySelector('#menus')
var odiv=document.createElement('div')  //创建一个div标签
var suoying=parseInt(Math.random()*arrImg.length)  //用来记录是第几张图片
odiv.innerHTML='<svg t="1681093944846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4217" width="200" height="200"><path d="M947.2 173.248c6.912 0 12.8 5.888 12.8 12.8v615.232c0 6.912-5.888 12.8-12.8 12.8H76.8c-6.912 0-12.8-5.888-12.8-12.8V186.048c0-6.912 5.888-12.8 12.8-12.8h870.4m0-64H76.8c-42.24 0-76.8 34.56-76.8 76.8v615.232c0 42.24 34.56 76.8 76.8 76.8h870.4c42.24 0 76.8-34.56 76.8-76.8V186.048c0-42.24-34.56-76.8-76.8-76.8z" fill="blue" p-id="4218"></path><path d="M694.4 760.192H117.824l242.176-257.28c25.344-26.944 66.88-26.944 92.224 0l242.176 257.28z" fill="aqua" p-id="4219"></path><path d="M906.176 760.192H519.296l87.552-92.992 59.84-63.552c25.28-26.944 66.816-26.944 92.16 0l147.328 156.544z" fill="aqua" p-id="4220"></path><path d="M649.792 341.952m-62.976 0a62.976 62.976 0 1 0 125.952 0 62.976 62.976 0 1 0-125.952 0Z" fill="aqua" p-id="4221"></path></svg><span>更换背景</span>'
odiv.id='custom'     //给自己创建的div标签挂一个id属性，方便对其样式进行修改
odiv.onclick=function(){
    suoying++
    if(suoying===arrImg.length){
        suoying=0
        a.style.backgroundImage=`url(${arrImg[suoying]})`
    }else{
        a.style.backgroundImage=`url(${arrImg[suoying]})`
    }
}
c.appendChild(odiv)
onscroll=function(){     //滚动条滚动就会触发
            if(window.document.documentElement.scrollTop>0){
                odiv.style.color='black'
                
            }else{
                odiv.style.color='white'
            }
        }
a.style.backgroundImage=`url(${arrImg[suoying]})`

这里的arrImg数组用来存放照片的链接，可以自行添加照片的链接

css的代码

#custom{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 90px;
      height: 40px;
      right: 420px;   /* 请根据自己的导航栏长度进行修改位置 */
      top: 12px;
      font-size: 0.78em;
      font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
      transition: all 1s;
      margin-right: 5px;
      color: white;
  }
  #custom:hover{
      transform: translateX(-0.5rem);
  }
  @media screen and (max-width:768px) {
      #custom{
        right: 40px;  /* 请根据自己的导航栏长度进行修改位置 */
    }
  }
  @media screen and (max-width:350px) {
      #custom{
        right: 10px;
        top: 40px;
    }
  }
  .icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.45em;
    fill: currentColor;
    overflow: hidden;
  }

最后不要忘记引入了了哦，小伙伴们！！！

部署后没有生效的原因

如果刷新后没有生效，可以试着清除浏览器数据，再打开自己的博客网站