本文实例为大家分享了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>
