Closed NB-Group closed 1 year ago
众所周知, CSS和JavaScript都可以用来调整网页亮度。
在CSS中,可以使用filter属性,并设置brightness值来改变网页元素的亮度。例如:
body { filter: brightness(80%); }
在JavaScript中,可以获取DOM元素并修改其样式属性来改变网页元素的亮度。例如:
document.body.style.filter = "brightness(80%)";
又众所周知, 在html中可以用input标签创建滚动条,例如:
input
<input type="range" min="0" max="100" value="50" id="slider">
也可以加亿点css:
input[type=range] { -webkit-appearance: none; width: 100%; height: 10px; background-color: #ddd; border-radius: 5px; outline: none; margin-top: 10px; } input[type=range]:hover { cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background-color: #0099cc; border-radius: 50%; margin-top: -5px; }
那么,就可以实现通过滚动条调整亮度。
<body> <div> <input type="range" min="0" max="100" value="50" id="slider"> <span id="value">50</span> <p style="position: fixed; bottom:0; width: 100%; height: 100%; background-color: white; z-index: -1;"></p> </div> <style> div { width: 200px; height: 30px; background-color: #f5f5f5; border-radius: 15px; padding: 5px; } input[type=range] { -webkit-appearance: none; width: 100%; height: 10px; background-color: #ddd; border-radius: 5px; outline: none; margin-top: 10px; } input[type=range]:hover { cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background-color: #0099cc; border-radius: 50%; margin-top: -5px; } #value { display: inline-block; font-size: 20px; margin-left: 10px; color: #333; } </style> <script> const slider = document.getElementById("slider"); const value = document.getElementById("value"); slider.addEventListener("input", () => { value.textContent = slider.value; document.body.style.filter = `brightness(${slider.value}%)`; }); </script> </body>
这代码写的垃圾,实测win12可以使用。
来来来继续把功能加 @tjy-gitnub @User782Tec
众所周知,你可以提交pr(先fork再更改最后提交 >u-)o
不太习惯这种方式,我多用用吧
众所周知,你可以提交pr(先fork再更改最后提交 >u-)o 不太习惯这种方式,我多用用吧
可以学学Git,有必要的
这个更新会计入贡献的 (当然无私奉献的精神也是可嘉的...
众所周知, CSS和JavaScript都可以用来调整网页亮度。
在CSS中,可以使用filter属性,并设置brightness值来改变网页元素的亮度。例如:
在JavaScript中,可以获取DOM元素并修改其样式属性来改变网页元素的亮度。例如:
又众所周知, 在html中可以用
input
标签创建滚动条,例如:也可以加亿点css:
那么,就可以实现通过滚动条调整亮度。
这代码写的垃圾,实测win12可以使用。
来来来继续把功能加 @tjy-gitnub @User782Tec