实现动态音量条

最新推荐文章于 2024-08-16 23:57:55 发布

Kanglizi

最新推荐文章于 2024-08-16 23:57:55 发布

阅读量1.8k

点赞数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>scroll bar</title>
		<style type="text/css">
			.wrapper{
				position: relative;
				width: 500px;
				height: 40px;
				/*border: 1px solid black;*/
				background-color: #92ECF5;

			}
			#volumeValue{
				font-size: 20px;
				line-height: 40px;
			}
			#fix{
				position: absolute;
				left: 40px;
				width: 400px;
				height: 30px;
				top: 5px;
				border: 1px solid black;
				background-color: black;
			}
			#scroll{

				width: 0px;
				height: 30px;
				
				background-color: blue;
			}
			#btn_add button{
				position: absolute;
				right: 0;
				top:0;
				width: 20px;
				height: 15px;
				background-color: red;
			}
			#btn_sub button{
				position: absolute;
				right: 0;
				top: 20px;
				width: 20px;
				height: 15px;
				background-color: red;
			}

		</style>
	</head>
	<body>
		<script type="text/javascript">
		var volume=0;
		function get(id){
			return document.getElementById(id);
		}
		function addVolume(){				//按键加音量
			if (volume==30) {
				get("volumeValue").innerHTML="max"		//若最大则显示最大	
				
			}
			else{
				volume++;
				get("volumeValue").innerHTML=volume;
			}
			get("scroll").style.width=(volume/30)*400+"px";
		}
		function subVolume(){				//按键减音量
			if (volume==0) {	
				get("volumeValue").innerHTML="mute"		//若最小则提示最小		
				
			}

			else{
				volume--;
				get("volumeValue").innerHTML=volume;
			}
			get("scroll").style.width=(volume/30)*400+"px";
			get("")
		}

		
		</script>
		<body>
			<div class="wrapper">
			<div id="volumeValue"></div>
				<div id="fix">
					<div id="scroll"></div>
				</div>
				<div id="btn_add"><button type="button" onclick="addVolume()">+</button></div>
				<div id="btn_sub"><button type="button" onclick="subVolume()">-</button></div>
			</div>
		</body>
	</body>
</html>