感觉用js去写html确实有点难度啊，而且js去写html的代码真的很乱（站长能力有限，只能写出这样的代码了，我会继续学习，优化自己的代码的，哈哈哈哈），维护起来不容易啊！！！

更改后的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/1637562996238163756299635.png',
    'https://www.toopic.cn/public/uploads/small/1642751534826164275153484.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',
    'https://www.toopic.cn/public/uploads/small/164275047944164275047961.jpg',
    'https://www.toopic.cn/public/uploads/small/164275045439516427504541.jpg',
    'https://www.toopic.cn/public/uploads/small/1642750432122164275043293.jpg',
    'https://www.toopic.cn/public/uploads/small/1637562995904163756299548.png',
    'https://www.toopic.cn/public/uploads/small/1634204739682163420473994.jpg'
]
// 适合于手机的背景
var arrImg_1=['https://www.toopic.cn/public/uploads/small/1643009966127164300996671.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009930474164300993032.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009928240164300992847.jpg',
    'https://www.toopic.cn/public/uploads/small/1642756678726164275667880.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009950579164300995042.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009929331164300992978.jpg',
    'https://www.toopic.cn/public/uploads/small/16430099287616430099288.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009925630164300992534.jpg',
    'https://www.toopic.cn/public/uploads/small/1643009891321164300989160.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) //用来记录是第几张图片
var suoying_1 = parseInt(Math.random() * arrImg_1.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属性，方便对其样式进行修改

// 生成弹窗
var al = document.querySelector('#sidebar')
$alert1 = document.createElement('div')
$alert2 = document.createElement('div')
$alert5 = document.createElement('div')
$alert6 = document.createElement('div')
$alert7 = document.createElement('div')
$alert8 = document.createElement('div')
$alert9 = document.createElement('div')
$alert10 = document.createElement('div')
$alert11 = document.createElement('div')
$alert12 = document.createElement('div')
$alert13 = document.createElement('div')
$alert14 = document.createElement('div')
$input = document.createElement('input')


$alert1.id = 'alert'
$alert2.id = 'alertcenter'
$alert10.innerHTML = '🥥🥥更换背景'
$alert7.innerHTML = '自定义背景：'
$alert8.innerHTML = '更改'
$alert9.innerHTML = '<label>×</label>'
$alert12.innerHTML = '适合于电脑的背景:'
$alert13.innerHTML = '适合于手机的背景:'
$alert5.id = 'alertcenterHeader'
$alert6.id = 'alertcenterContent'
$alert8.id = 'aaa'
$alert11.id = 'bbb'
$alert14.id = 'alertcenterContent_1'
$input.type = 'text'
$input.placeholder = '请输入自定义背景的链接'
$input.id = 'alertcenterContentInput'

odiv.onclick = function() {
    $alert1.style.display = 'block'
}


c.appendChild(odiv)
console.log(window.document.documentElement.clientWidth)
if(window.document.documentElement.clientWidth<500){
    a.style.backgroundImage = `url(${arrImg_1[suoying_1]})`
}else{
    a.style.backgroundImage = `url(${arrImg[suoying]})`
}


al.onclick = function(evt) {
    // 这个if语句是为了只有点击空白处时才会关闭弹窗
    if (evt.target.id == 'alert') {
        $alert1.style.display = 'none'
    }
}
// ×的点击事件
$alert9.onclick = function() {
    $alert1.style.display = 'none'
}

// 判读照片链接的函数
function checkImg(imgUrl) {
    return new Promise((resolve, reject) => {
        var ImgObj = new Image()
        ImgObj.src = imgUrl
        ImgObj.onload = function(res) {
            resolve(res)
        }
        ImgObj.onerror = function(err) {
            reject(err)
        }
    })
}


// 更改的事件
$alert8.onclick = function() {
    checkImg($input.value).then(() => {
        a.style.backgroundImage = `url(${$input.value})`
    }).catch(() => {
        alert('照片链接错误')
    })
}


al.appendChild($alert1)
$alert1.appendChild($alert2)
$alert2.appendChild($alert5)
$alert2.appendChild($alert12)
$alert2.appendChild($alert6)
$alert2.appendChild($alert13)
$alert2.appendChild($alert14)
$alert2.appendChild($alert7)
$alert2.appendChild($input)
$alert2.appendChild($alert8)
$alert5.appendChild($alert11)
$alert11.appendChild($alert10)
$alert11.appendChild($alert9)

// 根据存放的照片数量创建img标签
// 电脑背景
for (let i = 0; i < arrImg.length; i++) {
    var img = document.createElement('img')
    img.src = arrImg[i]
    img.onclick = function() {
        a.style.backgroundImage = `url(${arrImg[i]})`
    }
    $alert6.appendChild(img)
}
// 手机背景
for (let i = 0; i < arrImg_1.length; i++) {
    var img = document.createElement('img')
    img.src = arrImg_1[i]
    img.onclick = function() {
        a.style.backgroundImage = `url(${arrImg_1[i]})`
    }
    $alert14.appendChild(img)
}


// 适配黑夜模式
var changeDark = document.querySelector('#darkmode')
var win = document.querySelector('html')
onscroll = function() { //滚动条滚动就会触发
    if(win.dataset.theme=='dark'){
        odiv.style.color = 'white'
    }else{
        if (window.document.documentElement.scrollTop > 0) {
            odiv.style.color = 'black'
        } else {
            odiv.style.color = 'white'
        }
    }
}
changeDark.onclick=function(){
    // console.log(win.dataset.theme)
    if(win.dataset.theme=='light'){
        odiv.style.color = 'white'
        $alert2.style.backgroundColor='#1c1a1a'
        $alert5.style.backgroundColor='#283536'
        $input.style.backgroundColor='black'
    }else{
        if (window.document.documentElement.scrollTop > 0) {
            odiv.style.color = 'black'
        } else {
            odiv.style.color = 'white'
        }
        $alert2.style.backgroundColor='white'
        $alert5.style.backgroundColor='#a3e9eb'
        $input.style.backgroundColor='white'
    }
}
if(win.dataset.theme=='dark'){
        odiv.style.color = 'white'
        $alert2.style.backgroundColor='#1c1a1a'
        $alert5.style.backgroundColor='#283536'
        $input.style.backgroundColor='black'
    }else{
        if (window.document.documentElement.scrollTop > 0) {
            odiv.style.color = 'black'
        } else {
            odiv.style.color = 'white'
        }
    }

更改后的css代码

 /* 背景更换 */
 #custom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 90px;
  height: 40px;
  right: 485px;
  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: 70px;
}
 }
 @media screen and (min-width:768px) and (max-width:824px) {
     #custom{
    right: 90px;
}
 }
 @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;
 }
 
 
 /* 更换背景的弹窗 */
 #alert{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  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;;
  display: none;
 }
 #alertcenter{
  width: 70%;
  height: 70%;
  background-color: white;
  border-radius: 10px;
  overflow: auto;
  position: relative;
  margin: 10vh auto;
 }
 #alertcenterHeader{
  width:70%;
  height: 33px;
  background-color: #a3e9eb;
  line-height: 33px;
  font-size: 1.1rem;
  border-radius: 5px 5px 0 0;
  position: fixed;
  z-index: 100;
 }
 @media screen and (max-width:521px) {
        #alertcenter{
            width: 100%;
           height: 90%;
           margin: 5vh 0;
        }
  #alertcenterHeader{
      width: 100%;
  }
  }
 #alertcenterContent{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
 }
 #alertcenterContent img{
  margin: 15px;
  width: 15%;
  border-radius: 5px;
 } 
 #alertcenterContent_1{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 }
 #alertcenterContent_1 img{
  margin: 15px;
  width: 20%;
  border-radius: 5px;
 }
 
 @media screen and (max-width:780px) {
  #alertcenterContent img{
      width: 25%;
  }
 }
 @media screen and (max-width:400px) {
  #alertcenterContent img{
      width: 35%;
  }
 }
 #alertcenterContentInput{
  width: 80%;
  height: 30px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid deepskyblue;
  display: inline-block;
  margin-left: 20px;
 }
 #aaa{
  width: 3.875rem;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 0.9rem;
  border: 1px solid black;
  display: inline-block;
  margin-left: 0.5rem;
  border-radius: 4px;
 }
 #bbb{
  height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 #bbb div:nth-child(2){
  font-size: 25px;
  position: fixed;
  right: 10px;
 }
 #alertcenter div:nth-child(2){
  position: relative;
  top: 34px;
 }

这篇文章后续会持续修改的，请关注一下哦！！！