This is my sixth day of the Gwen Challenge
Effect:
First:
Implementation is very simple, is the background color switch, with the most basic JS;
1. Define the label of the switch button, ‘BAI’ is the small circle inside:
<div class="kaiguan" >
<div class="bai" id="anniu"></div>
</div>
Copy the code2. Switch button style:
.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.5 px.;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0.0.0);
border-radius: 50%;
transition: all 1s;
}
Copy the code3. In the js part, after clicking the switch, the style of the switch and the ball will change, and the font and background color of the body will change:
<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>
Copy the code4. Modified style:
.hei{
position: absolute;
top: 1.5 px.;
right: 2px;
height: 13px;
width: 13px;
background-color: rgb(11.243.81);
border-radius: 50%;
transition: all 1s;
}
Copy the code5. Complete code:
<! DOCTYPEhtml>
<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.5 px.;
left: 2px;
height: 13px;
width: 13px;
background-color: rgb(0.0.0);
border-radius: 50%;
transition: all 1s;
}
.hei{
position: absolute;
top: 1.5 px.;
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>少年派的奇幻漂流</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>
Copy the codeConclusion:
233333 warm announced (beating drums), my B standing account address: space.bilibili.com/176586698 tears (Ĭ ^ Ĭ)
Other articles: Colorful streamer text HTML + CSS Bubble floating background effects HTML + CSS Simple clock effects HTML + CSS + JS Cyberpunk style buttons HTML + CSS imitation netease Cloud official website rotation diagram HTML + CSS + JS Water wave loading animation HTML + CSS navigation bar scrolling gradient effect HTML + CSS + JS Book page turning HTML + CSS 3D stereo album HTML + CSS Neon painting board effect HTML + CSS + JS Remember some CSS properties summary (a) Sass summary note…… Etc.