网页黑夜模式白天模式切换 html+css+js
效果：
先言：
实现是很简单的，就是背景色的切换，用的是最基础的js；
1.定义开关按钮标签，‘bai’就是里面那个小圆圈：
<div class="kaiguan" >
<div class="bai" id="anniu">div>
div>
2.开关按钮的样式：
.kaiguan{
position: absolute;
top: 20px;
right: 50px;
width: 40px;
height: 20px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
transition: all 3s;
}
.bai{
position: absolute;
top: 1.5px;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
transition: all 1s;
}
3.js部分，点击开关后，开关和小球的样式改变，body的字体和背景颜色改变：
<script>
var anniu =document.getElementById('anniu');
var kaiguan = document.querySelector('.kaiguan');
var body = document.getElementById('body');
var temp = 1;
anniu.addEventListener('click',function(){
if(temp==1){
this.className = 'hei';
temp=0;
kaiguan.style. border= '2px solid rgb(11, 243, 81)';
body.style. backgroundColor= 'rgb(7, 7, 29)';
body.style.color = 'white';
}else{
this.className = 'bai';
temp=1;
kaiguan.style. border= '2px solid black';
body.style. backgroundColor= 'white';
body.style.color = 'black';
}
})
</script>
4.修改后的样式：
.hei{
position: absolute;
top: 1.5px;
right: 2px;
height: 13px;
width: 13px;
background-color: rgb(11, 243, 81);
border-radius: 50%;
transition: all 1s;
}
5.完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
transition: all 1s;
}
.kaiguan{
position: absolute;
top: 20px;
right: 50px;
width: 40px;
height: 20px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
transition: all 3s;
}
.bai{
position: absolute;
top: 1.5px;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
transition: all 1s;
}
.hei{
position: absolute;
top: 1.5px;
right: 2px;
height: 13px;
width: 13px;
background-color: rgb(11, 243, 81);
border-radius: 50%;
transition: all 1s;
}
h1{
margin: 100px auto;
width: 1000px;
text-align: center;
}
p{
margin: -60px auto;
width: 1100px;
text-align-last:center;
}
style>
head>
<body id="body" >
<div class="kaiguan" >
<div class="bai" id="anniu">div>
div>
<h1>Life of Pih1>
<p >
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner.
p>
<script>
var anniu =document.getElementById('anniu');
var kaiguan = document.querySelector('.kaiguan');
var body = document.getElementById('body');
var temp = 1;
anniu.addEventListener('click',function(){
if(temp==1){
this.className = 'hei';
temp=0;
kaiguan.style. border= '2px solid rgb(11, 243, 81)';
body.style. backgroundColor= 'rgb(7, 7, 29)';
body.style.color = 'white';
}else{
this.className = 'bai';
temp=1;
kaiguan.style. border= '2px solid black';
body.style. backgroundColor= 'white';
body.style.color = 'black';
}
})
script>
body>
html>
总结：
233333