前言
最近回顧js基礎，看到 event.target.style.color，正好前幾天複習到了定時器，就想着寫一個呼吸燈玩玩。也是受生活中一些用品充電採用呼吸燈的影響，覺得一閃一閃的好玩又好看。
前端
原生js，就一個html文件。源碼附後。
在頁面任意位置點擊開關燈。
白色光和黃色光交替，像呼吸一樣。
運行效果
應用場景
哈哈，我是想着晚上睡覺當屏保或小夜燈用。
這個燈光交替的時間可以自己在源碼中調整，玩一些小遊戲時可以做倒計時用。
熒光綠的燈罩，靈感來自我老公的夜光杯，哈哈，當初我專門給他買的夜光的，方便他晚上喝水。
源碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>呼吸燈</title>
<style>
html,body,#root{
height:100%;
margin:0;
}
#root{
width:100%;
background: #000022;
cursor: pointer;
overflow: hidden;
}
div.light{
width:100px;
height:100px;
margin:0 auto;
position: relative;
top:30%;
transform:translateY(-50%);
box-sizing: border-box;
border-radius: 50%;
border:1px solid rgba(255,255,255,0.3);
box-shadow: 0 0 20px 2px #85fd5d;
}
</style>
</head>
<body>
<div id="root">
<div class="light"></div>
</div>
<script>
var isLight = false;//默認關燈狀態
var doc=document;
var timer;//定義一個計時器。
doc.onclick=function(){//頁面任意位置點擊開關燈
isLight = !isLight;
if(isLight){
//是否更明亮（白光） 默認否
var lighter=false;
timer=setInterval(function(){
//燈光閃爍
lighter=!lighter;
if(lighter){
//黃色光源
doc.getElementsByClassName("light")[0].style.background="#fbf827";
doc.getElementsByClassName("light")[0].style.boxShadow="0 0 30px 30px #ffe348";
}else{
//白色光源
doc.getElementsByClassName("light")[0].style.background="#fff";
doc.getElementsByClassName("light")[0].style.boxShadow="0 0 30px 30px #f7f7f7";
}
},1000);
}else{
clearInterval(timer);
doc.getElementsByClassName("light")[0].style.background="#999";
//燈罩(boxShadow)是夜光的，哈哈，開燈的時候不亮,關燈的時候會亮。
doc.getElementsByClassName("light")[0].style.boxShadow="0 0 20px 2px #85fd5d";
}
};
</script>
</body>
</html>