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);
}
});
});
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
