<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title></head><style>#div1{position:relative;}#div1 div{width:50px;height:50px;background:blue;color:#fff;font-size:20px;text-align:center;line-height:50px;position:absolute;}</style><script>window.onload = function(){ var oTxt = document.getElementById('txt1'); var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { //0 0*50 //1 1*50 //2 2*50 //3 1*50 //4 0*50 //( oTxt.value + 2 );//从页面当中获取的任何数据都是一个字符串类型的 string //alert( typeof 222 ); // oDiv.innerHTML = ''; var num = parseInt( oTxt.value ); if( num%2==0 ) { alert( '请输入一个奇数' ); } else { for( var i=0;i<num;i++ ) { if( i<(num-1)/2 ) { oDiv.innerHTML +='<div style="left:'+(i*50)+'px;top:'+(i*50)+'px;">'+i+'</div>'; } else { oDiv.innerHTML +='<div style="left:'+(i*50)+'px;top:'+((num-1-i)*50)+'px;">'+i+'</div>'; }; }; }; };};</script><body>
<input type="text" value="" id="txt1"> <input type="button" id="btn1" value="按钮"><div id="div1">
</div>
</body></html>