更换博客背景2.0版本（自由选择）
·116 字·1 分钟阅读
butterfly
感觉用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;
}