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

2024-07-11 04:30| 来源: 网络整理| 查看: 265

具体效果图如下

实现思路：

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

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

核心：

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

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

具体实现可参考以下代码

* { 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 值即可使得按钮控制范围增大

【本文地址】

公司简介

联系我们