每天学一个jquery插件-led数字风格1

Posted 2021-05-17 阿飞超努力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-led数字风格1相关的知识，希望对你有一定的参考价值。

每天一个jquery插件-led数字风格1

led数字风格1

还是单纯的试一下效果，然后再改成对应效果

效果如下
在这里插入图片描述

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>led数字风格</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/lednum.js"></script>
		<link href="css/lednum.css" rel="stylesheet" type="text/css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#txt {
				border: 1px solid lightgray;
				height: 30px;
				width: 200px;
				border-radius: 5px;
				margin: 20px;
				outline: none;
			}

			#btn {
				border: 1px solid lightgray;
				height: 30px;
				width: 200px;
				border-radius: 5px;
				margin: 20px;
				outline: none;
				cursor: pointer;
			}

			#show {
				border: 1px solid lightgray;
				width: 450px;
				height: 60px;
				margin: 20px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#test {
				border: 1px solid lightgray;
				width: 100px;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 50px;
			}

			.lednum {
				width: 12px;
				height: 24px;
				position: relative;
				pointer-events: none;
			}

			.led {
				background-color: red;
				border-radius: 50%;
				position: absolute;
				width: 70%;
				height: 7%;
			}

			.led0 {
				left: 15%;
				top: 5%;
			}

			.led1 {
				left: -20%;
				top: 26%;
				transform: rotate(90deg);
			}

			.led2 {
				left: 15%;
				top: 47%;
			}

			.led3 {
				left: 50%;
				top: 26%;
				transform: rotate(90deg);
			}

			.led4 {
				left: -20%;
				top: 68%;
				transform: rotate(90deg);
			}

			.led5 {
				left: 15%;
				top: 89%;
			}

			.led6 {
				left: 50%;
				top: 68%;
				transform: rotate(90deg);
			}
		</style>
	</head>
	<body>
		<input id="txt" type="number" min="0" max="9999" value="10" />
		<button id="btn">渲染</button>
		<div id="show">
		</div>
	</body>
</html>
<script>
	const theled =
		'<div class="lednum"><div class="led led0"></div><div class="led led1"></div><div class="led led2"></div><div class="led led3"></div><div class="led led4"></div><div class="led led5"></div><div class="led led6"></div></div>'
	$(function() {
		$("#btn").click(function() {
			$("#show").find(".lednum").remove();
			var str = $("#txt").val();
			var arr = str.split("");
			arr.forEach(item => {
				var index = parseInt(item);
				var $led = $(theled);
				$led.attr('data-index', index);
				$led.appendTo($("#show"));
				tonum($led, index);
			})
		})
		$('#txt').on('input propertychange', function() {
			$("#btn").click();
		});
	})

	function tonum($dom, index) {
		if (index == 0) {
			$dom.find(".led2").hide();
		} else if (index == 1) {
			$dom.find(".led0").hide();
			$dom.find(".led1").hide();
			$dom.find(".led2").hide();
			$dom.find(".led4").hide();
			$dom.find(".led5").hide();
		} else if (index == 2) {
			$dom.find(".led1").hide();
			$dom.find(".led6").hide();
		} else if (index == 3) {
			$dom.find(".led1").hide();
			$dom.find(".led4").hide();
		} else if (index == 4) {
			$dom.find(".led0").hide();
			$dom.find(".led4").hide();
			$dom.find(".led5").hide();
		} else if (index == 5) {
			$dom.find(".led3").hide();
			$dom.find(".led4").hide();
		} else if (index == 6) {
			$dom.find(".led3").hide();
		} else if (index == 7) {
			$dom.find(".led1").hide();
			$dom.find(".led2").hide();
			$dom.find(".led4").hide();
			$dom.find(".led5").hide();
			$dom.find(".led4").hide();
		} else if (index == 9) {
			$dom.find(".led4").hide();
		}
	}
</script>

思路解释

反正就是用一个固定的容器替代数字，然后根据数字在隐藏对应的块状

以上是关于每天学一个jquery插件-led数字风格1的主要内容，如果未能解决你的问题，请参考以下文章