<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><style>#div1{position:relative;}#div1 div{width:50px;height:50px;backgroun ...
<!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
for( var i=0;i<5;i++ )
{
if( i<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:'+((5-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>
