本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下
效果
html部分
<body><p class="all"><p>当前位置0%</p><p class="bar"><p class="box"></p></p></p></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.offsetWidthbox.onmousedown = function (ev) {let boxL = box.offsetLeftlet e = ev || window.event //兼容性let mouseX = e.clientX //鼠标按下的位置window.onmousemove = function (ev) {let e = ev || window.eventlet 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 * 100p.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 / 2if (left < 0) {left = 0}if (left >= cha) {left = cha}box.style.left = left + 'px'let bili = left / cha * 100p.innerHTML = '当前位置' + Math.ceil(bili) + '%'console.log(left)return false}</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
以上就上有关原生js+css调节音量滑块的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。