这是我参与更文挑战的第6天
效果：
先言：
实现是很简单的，就是背景色的切换，用的是最基础的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.完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 Pi</h1>
<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
热烈宣布（敲锣打鼓），我的B站账号地址：space.bilibili.com/176586698
泪目( Ĭ ^ Ĭ )
其它文章： 炫彩流光文字 html+css 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 仿网易云官网轮播图 html+css+js 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 霓虹灯绘画板效果 html+css+js 记一些css属性总结（一） Sass总结笔记 ......等
