JavaScript案例：滑块调节元素颜色

分享一个DOM案例，使用滑块去控制页面中某个元素的颜色

HTML页面：

    Red:
    <input type="range" name="gerColor" value="171" min="0" max="255" id="r">
    <br> 
    Green:
    <input type="range" name="gerColor" value="21" min="0" max="255" id="g">
    <br> 
    Blue:
    <input type="range" name="gerColor" value="253" min="0" max="255" id="b">
    <br> 
    Alpha:
    <input type="range" name="gerColor" value="100" min="0" max="100" id="a">
    <div class="showColor">
        <div>Slide the slider above to adjust my background color</div>
    </div>

简单样式：

        .showColor {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(171, 21, 253);
            position: relative;
        }
        
        .showColor div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

js部分：

        // 获取四个颜色值的滑块元素
        var ranges = document.getElementsByName("gerColor");
        // 获取需要调整颜色的元素
        var showColor = document.getElementsByClassName("showColor")[0];
        // 遍历四个颜色值滑块
        for (let i = 0; i < ranges.length; i++) {
            // 设置颜色函数
            function setColor() {
                // 给需要调整颜色的元素设置滑块产生的颜色值（rgba）
                showColor.style.backgroundColor = "rgba(" + ranges[0].value + "," + ranges[1].value + "," + ranges[2].value + "," + (ranges[3].value / 100) + ")";
                // 给文字设置和背景颜色相反的颜色值（255减去滑块的颜色值）
                showColor.style.color = "rgba(" + (255 - ranges[0].value) + "," + (255 - ranges[1].value) + "," + (255 - ranges[2].value) + "," + (ranges[3].value / 100) + ")";
            }
            // 页面加载的时候 执行一次设置颜色函数
            window.onload = setColor;
            // 给每个滑块滑动时绑定设置颜色函数
            ranges[i].onchange = setColor;
        }

页面打开时默认颜色：

调整之后：