介绍
Windows 10 有一个很棒的功能——亮度调节。使用这个功能，用户可以快速调整屏幕的亮度，而不用在使用计算机时被刺眼的亮度干扰。在本文中，我们将使用 HTML、CSS 和 JavaScript 来模仿这个功能。
HTML
首先，我们需要一个包含调整亮度所需组件的 HTML 文件。该文件应包括一个光标、一个方形滑块和一个范围滑块。我们还可以使用元素来显示当前亮度百分比。
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<span class="cursor"></span>
<div class="slider"></div>
<input type="range" min="0" max="100" value="50" class="range" />
<p class="percentage">50%
</div>
<script src="script.js"></script>
</body>
</html>
CSS
接下来，我们需要使用 CSS 来创建我们的 HTML 文件中的组件。我们将使用伪元素来创建方形滑块和光标。在我们的文件中，我们还将使用 transition 和 transform 属性来创建滑块和光标滑动时的动画效果。
创建滑块
我们将使用 .slider 类为滑块创建 CSS 样式。为了使滑块看起来像 Windows 10 的亮度调节滑块，我们将使用以下属性：
* width: 10px 是我们的滑块的宽度。
* height: 40px 是我们的滑块的高度。
* background-color: #fff 是我们的滑块的颜色。
* border-radius: 5px 是我们的滑块的圆角程度。
我们可以为滑块创建初始位置，如下所示：
.slider {
position: absolute;
top: 0;
left: -5px;
width: 10px;
height: 40px;
background-color: #fff;
border-radius: 5px;
}
接下来，我们将使用 .slider::before 为滑块创建一个伪元素。我们将使用以下属性：
* content: 为空，但伪元素不会显示，因此我们的伪元素就可以代表一个方形滑块。
* position: absolute，因为我们需要将伪元素放在滑块上。
* top: -5px，因为我们需要让伪元素往上移动 5px 这样它就能准确地与光标对齐。
* left: 0，因为我们希望伪元素始终在滑块的中心。
* width: 20px，因为我们需要一个比滑块宽两倍的方块。
* height: 20px，因为我们需要一个正方形滑块。
* background-color: 将颜色设为和页面背景一样的颜色，这样我们就只能看到滑块以及在滑块上的伪元素。
通过这些 CSS 规则，我们可以为滑块创建一个美观的样式：
.slider::before {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 20px;
height: 20px;
background-color: #f5f5f5;
}
创建光标
我们将使用 .cursor 类为光标创建 CSS 样式。我们将使用伪元素来创建光标，使用以下属性：
* content: 为空，但伪元素不会显示，因此我们的伪元素就可以代表一个光标。
* position: absolute，因为我们需要将伪元素放在光标上。
* top: 38px，因为我们的光标应该放在滑块下面。
* left: -5px，因为我们的光标应该在滑块上。
* width: 20px，因为我们需要一个和伪元素一样宽的光标。
* height: 4px，因为我们需要一个4px 的光标。
* background-color: #000，因为Windows 10的光标是黑色的。
* transform: rotate(-45deg)，因为我们需要根据 45 度的角度旋转我们的光标，这样它才能在光标上看起来更自然。
我们可以使用以下 CSS 样式为光标创建样式：
.cursor {
position: absolute;
top: 38px;
left: -5px;
width: 20px;
height: 4px;
}
.cursor::before {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 20px;
transform: rotate(-45deg);
}
JavaScript
在我们的 HTML 文件中，我们使用了一个范围滑块，因此我们需要一些 JavaScript 代码来获取滑块的值并将其用作剩余样式的百分比。我们还需要一些代码，以便光标和滑块以及范围滑块之间的互动正确。
我们可以为我们的 JavaScript 创建一个名为 script.js 的新文件，将其包含在 HTML 文件中，并在其中编写下列代码：
const slider = document.querySelector(".slider");
const cursor = document.querySelector(".cursor");
const range = document.querySelector(".range");
const percentage = document.querySelector(".percentage");
range.addEventListener("input", () => {
let value = range.value;
let left = value / 100 * (slider.offsetWidth - cursor.offsetWidth);
slider.style.left = left + "px";
percentage[xss_clean] = value + "%";
});
我们首先使用 document.querySelector() 方法设置变量 slider、cursor、range 和 percentage，并初始化它们。然后，我们将使用事件监听器为范围滑块创建 input 事件，这样每当滑块的值发生变化时，我们都会将其捕获。
在事件监听器内，我们首先获取范围滑块的值，使用以下代码：
let value = range.value;
接下来，我们计算光标应该移动的距离。我们首先获取 slider 的宽度和 cursor 的宽度，然后使用以下代码：
let left = value / 100 * (slider.offsetWidth - cursor.offsetWidth);
最后，我们将新 left 值赋给 slider.style.left，以便光标和滑块移动到正确的位置。我们还将新值添加到页面上，使用户能够知道当前亮度设置。最终我们创建了 Windows 10 系统中的滑块：
总结
在本文中，我们使用 HTML、CSS 和 JavaScript 来模仿了 Windows 10 中的亮度调节功能。我们在 HTML 文件中创建了光标、滑块、范围滑块和百分比文本，然后使用 CSS 设置了每个部分的样式。最后，我们使用 JavaScript 监听 event newInput，捕获滑块的值，并将它们应用于剩余组件的样式中，使其正确地反映当前亮度设置。
预览链接：https://codepen.io/wendyka/pen/NWRWJZO