序文
最近、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>