Preface
I recently reviewed the basics of js and saw event.target.style.color. I reviewed the timer just a few days ago, so I thought about writing a breathing light for fun. It is also affected by the use of breathing lights for charging some supplies in life, and I feel that it is fun and beautiful.
front end
Native js, just an html file. The source code is attached.
Click the switch light anywhere on the page.
White light and yellow light alternate, like breathing.
running result
Application scenario
Haha, I want to use it as a screensaver or night light when I sleep at night.
The time of this light alternation can be adjusted in the source code, and it can be used as a countdown when playing some small games.
The fluorescent green lampshade was inspired by my husband’s luminous cup, haha, I bought him a luminous cup, so he can drink water at night.
Source code
<!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>