🐬 可拖拽进度条

前几天遇到一位小伙伴，让实现一个原生进度条，在制作期间通过JS去控制css样式的时候一定要注意，这个地方很坑。接下来这个案例给大家复现一下，此篇文章若有疑惑不解之处，欢迎打扰作者联系微信 Akaibiu (烦请备注说明来意，谢谢)

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 原生进度条css样式调整 */
        .proGressBox {
            width: 80%;
            padding: 20px 18px;
            box-sizing: border-box;
            background-color: rgb(31, 33, 48);
            border-radius: 14px;
            position: fixed;
            bottom: 80px;
            left: 10%;
        }

        .proGressBox .box {
            width: 100%;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: top;
            position: relative;
        }

        .proGressBox .box p {
            font-size: 14px;
            color: #8a8a8a;
            width: 46px;
            margin: 0px 6px;
            display: block;
        }

        .proGressBox .box p:last-child {
            width: 6px;
        }

        input[type=range] {
            margin-top: 8px;
            /*上部分的填充值*/
            outline: none;
            -webkit-appearance: none;
            /*清除系统默认样式*/
            width: 100% !important;
            background: #ddd;
            /* background: -webkit-linear-gradient(#bea559, #ceae4f) no-repeat, #ddd; */
            /*背景颜色，改变的时候需要通过js动态调整*/
            /* background-size: 80% 100%; */
            /*设置左右宽度比例*/
            height: 3px;
            /*横条的高度，细的真的比较好看嗯*/
            /* rgb(196, 184, 178) 颜色值 */
        }

        /*拖动块的样式*/
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            /*清除系统默认样式*/
            height: 8px;
            /*拖动块高度*/
            width: 8px;
            /*拖动块宽度*/
            background: #f8f9fa;
            /*拖动块背景*/
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 1px #ddd;
            /*设置边框*/
        }
    </style>
</head>

<body>
    <div class="proGressBox">
        <div class="box">
            <p class="tip">速度</p>
            <input type="range" name="" value="0" id="progress">
            <p class="val">0</p>
        </div>
    </div>
    <script>
        /***
         * @description 页面加载函数
         * @abstractf iptDom 是当前input type="range" 的DOM元素
         * @abstractf valDom 是当前页面展示数值的DOM元素
         * @description 实现原理如下：
         * @description 通过给input标签绑定change事件去监听input的value值，
         * @description 再动态的赋值给 展示数值的p标签 通过innerHTML 或者innerText
         * @description 动态的修改background-zise的值！！ 注意写法
         * 
        */
        window.onload = function () {
            var iptDom = window.document.getElementById("progress");
            var valDom = window.document.querySelector('.val');
            iptDom.addEventListener("change", function () {
                valDom.innerHTML = iptDom.value;
                iptDom.style.background = '-webkit-linear-gradient(#bea559, #ceae4f) no-repeat, #ddd';

                // iptDom.style.backgroundSize =`${iptDom.value}% %100`; // 不生效

                iptDom.style.backgroundSize = `${iptDom.value + '%'} 100%`; // 有效

                // iptDom.style.backgroundSize =`${parseInt(iptDom.value)}% 100%`; // 有效
                console.log(iptDom.value, '进度');
            })
        }


    </script>
</body>

</html>

alt 示例图片

好了，以上的总结就到此为止了，如果有疑问可以不问也可以联系作者。咱们下期再见! Good bye! 🌸

🐬 可拖拽进度条 ​

🐬 可拖拽进度条