Web前端之实现酷炫的仪表进度条、JavaScript动态设置Css属性值、标签元素属性选择器、hsl样式函数

效果图

Html

<div class="main"></div>
<input type="range" id="range" value=0>
<p id="pc">0%</p>

JavaScript

function init() {
    let main = document.querySelector('.main');
    let range = document.querySelector('#range');
    let pc = document.querySelector('#pc');

    for (let i = 0; i < 100; i++) {
        let span = document.createElement('span');

        span.style.transform = `rotate(${i / 100 * 360 }deg)`;
        main.appendChild(span);
    }

    range.addEventListener('input', () => {
        range.style.backgroundSize = `${range.value}% 100%`;
        pc.innerHTML = `${range.value}%`;
        chColor(range.value);
    });

    function chColor(val) {
        for (let i = 0; i < main.children.length; i++) {
            if (i < val) {
                main.children[i].style.setProperty('--bg', `hsl(${i / 100 * 360}, 100%, 50%)`);
                main.children[i].style.setProperty('--sg', `hsl(${i / 100 * 360}, 100%, 50%)`);
            } else {
                main.children[i].style.setProperty('--bg', '#000000');
                main.children[i].style.setProperty('--sg', 'transparent');
            }
        }
    }
}

init();

Style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #333333;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.main {
    width: 30vw;
    height: 30vw;
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: center;
}

input[type='range'] {
    --c: #1e90ff;
    width: 30vw;
    height: 1vw;
    position: absolute;
    transform: translateY(20vw);
    appearance: none;
    background: linear-gradient(var(--c), var(--c)) no-repeat, #000000;
    background-size: 0 100%;
    border-radius: 0.5vw;
    cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
    width: 2vw;
    height: 2vw;
    appearance: none;
    background: var(--c);
    border-radius: 50%;
    box-shadow: 0 0 1vw #ffffff, 0 0 2vw #ffffff;
}

#pc {
    color: #ffffff;
    font-size: 8vw;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0.2vw 0.2vw 0 gray, 0 0 1vw #1e90ff, 0 0 2vw #1e90ff, 0 0 4vw #1e90ff;
}

.main span {
    --bg: #000000;
    --sg: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
}

.main span::after {
    content: '';
    width: 0.1vw;
    height: 2vw;
    position: absolute;
    background: var(--bg);
    box-shadow: 0 0 0.5vw var(--sg), 0 0 1vw var(--sg), 0 0 2vw var(--sg);
    transition: 0.8s linear;
}

解析

代码创建了一个简单的界面，其中有一个可拖动的滑块(range input)，滑块的值会导致一系列旋转的条状元素的颜色和长度发生变化。

---

html
一个<div>元素类名为"main"，用于容纳条状元素。
一个<input>元素类型为"range"，具有id为"range"，用于控制条状元素的变化。
一个<p>元素id为"pc"，用于显示滑块的值。

---

style
一些基本的样式设置，如去除默认的内外边距，设置全局的盒模型为边框模型，背景颜色等。
设置主体的背景颜色为深灰色。
设置.main元素的样式，定义了它的大小和位置等。
设置input[type=‘range’]和其thumb(滑块拖动的圆球)的样式。
设置#pc元素的样式，定义了它的字体大小、颜色和阴影效果。
设置.main span元素的样式，定义了条状元素的样式，包括颜色、阴影等。

---

JavaScript
init()函数用于初始化页面，获取相关元素，并设置滑块的事件监听器。
在循环中，通过创建span元素的方式创建了一系列条状元素，并将它们添加到.main元素中。
滑块的输入事件监听器会根据滑块的值改变背景的大小、滑块下方文字的内容，并调用chColor()函数改变条状元素的颜色。
chColor()函数根据传入的值改变条状元素的背景颜色，使用HSL颜色空间，从黑色到彩虹色渐变。

---

总体来说，这段代码实现了一个简单的滑块控制条状元素颜色和长度变化的效果。