js程式画一个心♥

最新推荐文章于 2023-02-14 16:03:00 发布

唔无误

最新推荐文章于 2023-02-14 16:03:00 发布

阅读量221

点赞数 1

分类专栏： html+js+css 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_40907356/article/details/117959054

版权

html+js+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

记录一下很久以前闲得没事干写的东西

输入4的倍数加1的数字，给你画一个心♥

效果如图：

很简单的js程式

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			div{
				line-height: 12px;
			}
			div a{
				line-height: 12px;
			}
			span{
				width: 12px;height: 12px;
				background-color: #ddd;display: inline-block;
			}
			label{
				width: 12px;height: 12px;
				background-color: red;display: inline-block;
				position: relative;
			}


		</style>
	</head>
	<body>
		<input type="number" min="5" value="9"><i>4的倍数加1（5、9、13、17、21）</i>
		<div class="div"></div>
		<script type="text/javascript">
			$("input").on('change', function() {
				cread();
			})
			var cread = function() {
				var a = $("input").val();
				if (a % 4 != 1) return;
				var t = "";
				for (var i = 0; i < a; i++) {
					t += "<span></span>";
				}
				$(".div").html(t + "<br/>");
				var b = 1;
				var c = 1;
				while (b < a) {
					b = b + 2;
					c++;
				}
				for (var d = 0; d < (a - 1) / 4; d++) {
					t = "<div>";
					for (var e = 0; e < (a - 1) / 4 - d; e++) {
						t += "<span></span>";
					}
					t += "<a>";
					for (var e = 0; e < d * 2 + 1; e++) {
						t += "<label></label>";
					}
					t += "</a>";
					for (var e = 0; e < ((a - 1) / 2) + 1 - (d + 1) * 2; e++) {
						t += "<span></span>";
					}
					t += "<a>";
					for (var e = 0; e < d * 2 + 1; e++) {
						t += "<label></label>";
					}
					t += "</a>";
					for (var e = 0; e < (a - 1) / 4 - d; e++) {
						t += "<span></span>";
					}
					$(".div").append("</div>" + t + "<br/>")
				}
				for (var d = 0; d < c; d++) {
					t = "<div>";
					for (var e = 0; e < d; e++) {
						t += "<span></span>";
					}
					t += "<a>";
					for (var e = 0; e < (c - d) * 2 - 1; e++) {
						t += "<label></label>";
					}
					t += "</a>";
					for (var e = 0; e < d; e++) {
						t += "<span></span>";
					}
					$(".div").append("</div>" + t + "<br/>")
				}
				t = "";
				for (var i = 0; i < a; i++) {
					t += "<span></span>";
				}
				$(".div").append(t + "<br/>")
			}
			cread();
		</script>
	</body>
</html>