網頁黑夜模式白天模式切換 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.完整程式碼:
<!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
相關文章
- python 爬蟲 自動切換 learnku 的白天 / 夜間模式Python爬蟲模式
- 可自動切換 learnku 夜間 / 白天模式的 python 指令碼模式Python指令碼
- 360隨身wifi無線網路卡模式與wifi模式換切換方法WiFi模式
- 絕地求生激戰場黑夜模式玩法介紹 刺激戰場黑夜模式怎麼玩?模式
- Oracle日誌模式切換Oracle模式
- 【DG】三大模式切換模式
- 商品顯示模式切換模式
- DataGuard切換保護模式模式
- Weblogic產品模式切換與JVM切換Web模式JVM
- win10怎麼切換到桌面模式_win10平板模式和桌面模式的切換教程Win10模式
- Win10怎樣切換平板模式_win10如何切換到平板模式Win10模式
- 歸檔模式與非歸檔模式的切換模式
- DG_三大模式切換模式
- win10安全模式切換正常模式的方法Win10模式
- Oracle DG管理模式和只讀模式相互切換Oracle模式
- KindEditor如何切換成簡單模式??模式
- 從簡單恢復模式切換模式
- ORACLE RAC模式下歸檔模式和非歸檔模式的切換方法Oracle模式
- 快速切換至Kotlin for Android模式KotlinAndroid模式
- 深色模式適配和主題切換模式
- Oracle資料庫切換歸檔模式Oracle資料庫模式
- ORACLE 10G Data Guard 模式切換Oracle 10g模式
- win10平板模式無法切換如何處理_win10平板模式切換不了怎麼解決Win10模式
- 從完整恢復模式或大容量日誌恢復模式切換模式
- redis sentinel哨兵模式安裝部署和切換Redis模式
- flutter 暗黑模式切換過渡動畫實現Flutter模式動畫
- 使用RecyclerView展示資料(可切換列表模式)View模式
- 【DataGuard】Oracle DataGuard 資料保護模式切換Oracle模式
- Oracle學習系列—歸檔模式的切換Oracle模式
- win10一鍵切換夜晚模式怎麼操作_win10怎麼實現夜間模式快速切換Win10模式
- win10平板模式怎麼切換電腦模式 win10怎麼退出平板模式到桌面模式Win10模式
- 資料庫單使用者模式切換回多使用者模式資料庫模式
- 微星筆記本怎麼切換啟動模式?微星筆記本bios設定啟動模式切換的教程筆記模式iOS
- idea 中maven檢視 切換離線模式IdeaMaven模式
- Oracle資料庫歸檔模式的切換ELOracle資料庫模式
- Redis 哨兵模式實現主從故障互切換Redis模式
- 網頁Banner圖片切換js的使用網頁JS
- Win10平板模式如何切換_win10系統退出平板模式的教程Win10模式