js实现音量调节

最新推荐文章于 2023-10-26 09:03:52 发布

阳&光

最新推荐文章于 2023-10-26 09:03:52 发布

阅读量3.9k

点赞数 3

分类专栏： js音量调节文章标签： javascript

本文链接：https://blog.csdn.net/D15306354614/article/details/109000887

版权

js音量调节专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js实现音量控制条

实现效果：在这里插入图片描述
CSS部分：

<style type="text/css">
		
        #box{
        width: 430px;
        height: 25px;
        border: 1px solid #000;
        position: relative;
        }
		#box1{
		width: 0px;
		height: 25px;
		background: green;
		position: absolute;
		}
		#span1{
		height: 30px;
		width: 30px;
		background: green;
		display: block;
		border-radius: 10px;
		position: absolute;
		}
		#p1{
		position:absolute;
		width: 200px;
		height: 40px;
		text-align:center;
		line-height: 40px;
		font-size: 30px;
		} 
    </style>

页面部分

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/context/commtags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>音量调节条</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="Expires" content="0"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
</head>
<body>
		
				<div id="box" style="float:left;width:430px;top:8px;">
					<div id="box1">
						<span id="span1">
						</span>
					</div>
				</div>
				<div style="float:left;width:50px;">
					<p id="p1"></p>
				</div>
	       </div>
</body>
</html>

js部分代码

<script type="text/javascript">
			var Span =document.getElementById("span1");
			var Box =document.getElementById("box");
			var Box1 =document.getElementById("box1");
			var P1 =document.getElementById("p1");
			Span.onmousedown=function(e){
				
			          var evt =e||event;
						var x =evt.offsetX;
						var y =evt.offsetY;
						//console.log(x)
						//console.log("Aa")
						Box.onmousemove=function(e){
							var evt =e||event;
							Span.style.left=evt.clientX-Box.offsetLeft-x+"px";
							if(evt.clientX-Box.offsetLeft-x<=0){
								Span.style.left="0px";
							}
							if(evt.clientX-Box.offsetLeft-x>=400){
								Span.style.left="400px";
							}
							//console.log(Span.offsetLeft);
							P1.innerHTML="音量："+Math.floor(Span.offsetLeft/4);
							Box1.style.width=Span.offsetLeft+"px";
							
							
							Span.onmouseup=function(){
								Box.onmousemove=null;
							
							}
						}
						

				}
				
			}
		</script>