原生 JavaScript + html + css 写一个可调节屏幕亮度按钮

admin管理员组

文章数量:1618723

具体效果图如下

实现思路：

1.利用html css 构建出静态按钮

2.利用JavaScript的一系列dom操作实现下拉按钮与屏幕亮度的绑定

核心：

屏幕亮度的变化是由于屏幕背景颜色的实时刷新而产生的效果

dom操作实现按钮的操作，并且添加条件避免按钮超出 可调节范围

具体实现可参考以下代码

    <div class="bigbox">
        <div class="part part1"></div>
        <div class="part part2"></div>
        <div class="part part3"></div>
        <div class="part bottom"></div>
    </div>

        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: rgb(255, 255, 255);
        }
        .bigbox {
            position: fixed;
            width: 50px;
            height: 100px;
            top: 100px;
            left: 865px;
            background-color: #bfbfbf;
        }
        .part1 {
            position: absolute;
            width: 50px;
            height: 10px;
            top: -10px;
            left: 0px;
            background-color: black;
        }
        .part2 {
            position: absolute;
            width: 10px;
            height: 100px;
            top: 0px;
            left: 20px;
            background-color: black;
        }
        .part3 {
            position: absolute;
            width: 50px;
            height: 10px;
            top: 100px;
            left: 0px;
            background-color: black;
        }
        .bottom {
            position: absolute;
            width: 40px;
            height: 15px;
            top: 0px;
            left: 5px;
            background-color: red;
        }

        var bottom = document.querySelector('.bottom');
        var bigbox = document.querySelector('.bigbox');
        var body = document.body;
        var flag;
        //按住 按钮 不放时执行
        bottom.onmousedown = function(e) {
            bottom.style.cursor = 'move';
            flag = true;
            var disy = e.pageY - bottom.offsetTop;
            //鼠标在屏幕 任意区域 移动
            document.onmousemove = function(e) {
                // 获取 按钮 与 父级容器 之间的 y方向 的距离
                var y = e.pageY - disy;
                
                if (flag == true) {
                    //成功限制移动区域
                    if (y < 0) { y = 0 };//避免移动至 顶部 外围
                    if (y > 85) { y = 85 };//避免移动至 底部 外围
                    bottom.style.top = y + 'px';//按钮相对父级容器的距离
                    //按钮移动的同时 获取 rgb值
                    r = 255 - y;
                    g = 255 - y;
                    b = 255 - y;
                    backgroundColor = 'rgb'+'('+r+','+g+','+b+')';//利用字符的运算 得到符合规则的 rgb数值对
                    body.style.backgroundColor = backgroundColor;//赋予 body 背景色彩
                }
            }
        };
        document.onmouseup = function() {
            flag = false;
            bottom.style.cursor = 'auto';
        };

———————————————————————————————————————————————————————————

更新：

添加了几行代码，完成如下功能：仅需更改 bigbox 的 height 值 即可使得按钮控制范围增大

本文标签： 亮度可调节按钮屏幕JavaScript