音量控制js

最新推荐文章于 2024-06-02 16:17:12 发布

HainesFreeman

最新推荐文章于 2024-06-02 16:17:12 发布

阅读量1.3k

点赞数

分类专栏： js 业务

本文链接：https://blog.csdn.net/weixin_41829196/article/details/85257669

版权

js 同时被 2 个专栏收录

91 篇文章 1 订阅

订阅专栏

业务

67 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<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>
</head>
<body>
<div class="all">
	<p>当前位置0%</p>
	<div class="bar">
		<div class="box"></div>
	</div>
</div>
<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>
</body>
</html>

HainesFreeman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
音量控制js

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .all { width: 500px; height: 80px;
复制链接

扫一扫

专栏目录