js 控制音频音量的大小_原生js css调节音量滑块
2020-01-15 15:12:20  By: shinyuu

这里主要介绍了原生js css调节音量滑块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js调节音量滑块的具体代码,供大家参考,具体内容如下。


html部分

<body>
    <div class="all">
        <p>当前位置0%</p>
        <div class="bar">
            <div class="box"></div>
        </div>
    </div>
</body>


css部分

<style>
    .all {
        width: 500px;
        height: 80px;
        margin: 100px auto;
        position: relative;
    }

    .bar {
        width: 500px;
        height: 20px;
        border-radius: 10px;
        background: #aaa;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
    }

    .box {
        width: 30px;
        height: 30px;
        background: #000;
        position: absolute;
        bottom: 0;
        top: 0;
        margin: auto 0;
        border-radius: 50%;
        cursor: pointer;
        transition: left 0.1s linear 0s;
    }
</style>


js逻辑

<script>
    var box = document.getElementsByClassName(´box´)[0]
    var bar = document.getElementsByClassName(´bar´)[0]
    var all = document.getElementsByClassName(´all´)[0]
    var p = document.getElementsByTagName(´p´)[0]
    var cha = bar.offsetWidth - box.offsetWidth
    box.onmousedown = function (ev) {
        let boxL = box.offsetLeft
        let e = ev || window.event //兼容性
        let mouseX = e.clientX //鼠标按下的位置
        window.onmousemove = function (ev) {
            let e = ev || window.event
            let moveL = e.clientX - mouseX //鼠标移动的距离
            let newL = boxL   moveL //left值
            // 判断最大值和最小值
            if (newL < 0) {
                newL = 0
            }
            if (newL >= cha) {
                newL = cha
            }
            // 改变left值
            box.style.left = newL   ´px´
            // 计算比例
            let bili = newL / cha * 100
            p.innerHTML = ´当前位置´   Math.ceil(bili)   ´%´
            return false //取消默认事件
        }
        window.onmouseup = function () {
            window.onmousemove = false //解绑移动事件
            return false
        }
        return false
    };
    // 点击音量条
    bar.onclick = function (ev) {
        let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2
        if (left < 0) {
            left = 0
        }
        if (left >= cha) {
            left = cha
        }
        box.style.left = left   ´px´
        let bili = left / cha * 100
        p.innerHTML = ´当前位置´   Math.ceil(bili)   ´%´
        console.log(left)
        return false
    }
</script>


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下,你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。

或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。

为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。


猜你喜欢的

快速评论


技术评论

DD记账
top
+