js案例：呼吸灯

最新推荐文章于 2024-03-06 15:47:54 发布

前端嘻嘻哥

最新推荐文章于 2024-03-06 15:47:54 发布

阅读量440

点赞数

分类专栏：前端算法/案例文章标签：前端 js 算法数据结构

本文链接：https://blog.csdn.net/xixi1811/article/details/128620661

版权

前端算法/案例专栏收录该内容

6 篇文章

订阅专栏

本文通过JavaScript详细介绍了如何创建一个动态的呼吸灯效果，涉及基本的DOM操作、定时器运用以及简单的颜色变化算法，适合前端开发者提升交互体验的实践学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .light {
        height: 100px;
        width: 100px;
        border-radius: 50%;
        background-color: red;  /* 浏览器不支持的时候显示 */
        background-image: radial-gradient(rgb(255, 0, 0), rgb(100, 0, 0)); /* 标准的语法（必须放在最后） */
        
        }
    </style>
    </head>
    <body>
        <div class="light" style="opacity: 1;"></div>
    </body>
    <script>
    var light = document.querySelector('.light');
    var step =0.05 ; // 每100毫秒不透明度的变化值
    var opacity=light.style.opacity ;//记录div透明度的值
    var flag=1;//用来记录是升序还是绛序
    setInterval(function () {
        // 升序
        if (flag==0){
            opacity+=step;//页面透明度变大，从不透明到透明
            light.style.opacity=opacity;//将值传递给属性
            // 如果属性值超过1，改变flag，变为绛序，开始由透明到不透明
            if(opacity>=1){
                flag=1;
            }
        // 绛序
        }else{
            opacity-= step;
            light.style.opacity=opacity;
            if(opacity<0.6){
                flag=0;
            }
        }
    }, 100);
    </script>
</html>