原生js实现呼吸灯网页版

最新推荐文章于 2024-02-26 12:30:44 发布

Irene1991

最新推荐文章于 2024-02-26 12:30:44 发布

阅读量1.5k

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/Irene1991/article/details/106545882

版权

前端开发专栏收录该内容

54 篇文章 1 订阅

订阅专栏

前言

最近回顾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>

Irene1991

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现呼吸灯网页版

前言最近回顾js基础，看到 event.target.style.color，正好前几天复习到了定时器，就想着写一个呼吸灯玩玩。也是受生活中一些用品充电采用呼吸灯的影响，觉得一闪一闪的好玩又好看。前端原生js，就一个html文件。源码附后。在页面任意位置点击开关灯。白色光和黄色光交替，像呼吸一样。运行效果应用场景哈哈，我是想着晚上睡觉当屏保或小夜灯用。这个灯光交替的时间可以自己在源码中调整，玩一些小游戏时可以做倒计时用。荧光绿的灯罩，灵感来自...
复制链接

扫一扫