html+css：电池电量百分比效果图

最新推荐文章于 2024-04-25 16:03:09 发布

_小郭

最新推荐文章于 2024-04-25 16:03:09 发布

阅读量4.4k

点赞数

文章标签： js jquery css html

本文链接：https://blog.csdn.net/qq_43033251/article/details/104600381

版权

效果图：

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.container {
				height: 200px;
				width: 120px;
				position: relative;
				border: 1px solid pink;
				box-sizing: content-box;
				border-top: none;
			}
			
			.box {
				width: 120px;
				background-color: pink;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}
			
			.rela {
				position: relative;
				width: 100%;
				height: 100%;
			}
			
			.leftCon {
				width: 41px;
				height: 19px;
				position: absolute;
				left: -1px;
				top: 0;
				background-color: white;
				border-right: 1px solid pink;
				border-bottom: 1px solid pink;
				border-left: 1px solid white;
				border-top: 1px solid white;
			}
			
			.rightCon {
				border-right: 1px solid white;
				border-top: 1px solid white;
				width: 41px;
				height: 19px;
				position: absolute;
				right: -1px;
				top: 0;
				background-color: white;
				border-left: 1px solid pink;
				border-bottom: 1px solid pink;
				border-right: 1px solid white;
				border-top: 1px solid white;
			}
			
			.line {
				width: 40px;
				height: 1px;
				background-color: pink;
				position: absolute;
				top: 0;
				left: 40px;
			}
		</style>
		// 引入jquery
		<script src="jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<div style="margin-bottom: 20px;">
			<span>
				请输入电池电量百分比：0-100范围
			</span> <input class="inputVal" value="" />
		</div>
		<div class="container">
			<div class="box">
			</div>
			<div class="rela">
				<div class="line">
				</div>
				<div class="leftCon">
				</div>
				<div class="rightCon">
				</div>
			</div>
		</div>
		<script>
			$('.inputVal').change(function() {
				$('.box').css({
					height: $('.inputVal').val() * 2 + 'px'
				})
			})
		</script>

	</body>

</html>

_小郭

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html+css：电池电量百分比效果图

效果图：代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { height: 200px; width: 120px; posit...
复制链接

扫一扫