`
wx1568520008
  • 浏览: 20372 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

1.输入一个偶数,生成V字图形,打印出来

 
阅读更多

HTML代码如下说明:


<!DOCTYPE html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<script type="text/javascript" src="jquery-2.1.1.js"></script>
			<script type="text/javascript" src="item.js"></script>
			<link type="text/css" rel="stylesheet" href="main.css"/>
		</head>
		<body>
			<div class="container">
				<input type="text" id="num" value=""/>
				<input name="button" type="button" id="btn" value="点击" /> 
			</div>
			<div class="playground" style="height:1000px;padding-top:10px;"></div>
		</body>
	</html>

CSS段定义代码说明:

.item{
	background: red;
	width: 40px;
	text-align: center;
	float: left;
}

JavaScript代码说明:

$(document).ready(function(){
	$("#btn").click(function(){
		var num=$("#num").val();
		if(num%2!=0){alert("输入偶数");}
		else{
			var height=40;
			var avg=num/2;
			var left=[];
			var right=[];
			for(var i=0;i<avg;i++){
				left[i]="<button class='item' style='margin-top:"+height*i+"px'>"+i+"</button>";
			}
			for(var i=avg+1;i<=num;i++){
				var index=i-1-avg;
				right[index]="<button class='item' style='margin-top:"+height*-(i-num)+"px'>"+i+"</button>";
			}
			$(".playground").empty().append(left).append("<button class='item' style='margin-top:"+height*avg+"px'>"+avg+"</button>").append(right);
		}
	});

});

 

转载于:https://my.oschina.net/courage123/blog/736396

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics