<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
}
#box{
400px;
height: 400px;
background-color: blue;
top: 100px;
left: 300px;
}
#box > div{
background-color: yellow;
height: 1px;
}
</style>
<div id="box"></div>
<script type="text/javascript">
var divHtml = '';
var width = '';
var left = '';
for(var i=1;i<=400;i++){
if(i<=200){
width = i*2+'px';
left = (200-i)+'px';
}else{
width = (400-(i-200)*2)+'px';
left = (i-200)+'px';
}
divHtml += '<div style="'+width+';left:'+left+';top:'+(i-1)+'px;"></div>';
}
document.getElementById('box').innerHTML = divHtml;
</script>
以上代码能画出一个静态的图形，接下来改进了一下，可以动态画图啦
<style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; } #box{ 400px; height: 400px; background-color: blue; top: 100px; left: 300px; } #box > div{ background-color: yellow; height: 1px; } </style> <div id="box"></div> <script type="text/javascript"> var i = 1; function createH(){ if(i<=200){ var width = i*2+'px'; var left = (200-i)+'px'; }else{ var width = (400-(i-200)*2)+'px'; var left = (i-200)+'px'; } i++; var h = document.createElement('div'); h.style.width = width; h.style.left = left; h.style.top = (i-2)+'px'; return h; } var iA = setInterval(add,10); function add(){ if(i===400){ clearInterval(iA); return false; } var h = createH(); document.getElementById('box').appendChild(h); } </script>
不妨自己试试，下面又做了个小小的修改
附上“龍”的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ position: absolute; } #box{ width: 400px; height: 400px; background-color: blue; top: 100px; left: 300px; } #box > div{ background-color: yellow; height: 1px; } #word{ color: blue; display: block; width: 200px; height: 200px; position: absolute; top: 100px; left: 100px; z-index: 1; font: 200px/200px '楷体'; } </style> </head> <body> <div id="box"> <span id="word">龍</span> </div> <script type="text/javascript"> var i = 1; function createH(){ if(i<=200){ var width = i*2+'px'; var left = (200-i)+'px'; }else{ var width = (400-(i-200)*2)+'px'; var left = (i-200)+'px'; } i++; var h = document.createElement('div'); h.style.width = width; h.style.left = left; h.style.top = (i-2)+'px'; return h; } var iA = setInterval(add,10); function add(){ if(i===400){ clearInterval(iA); return false; } var h = createH(); document.getElementById('box').appendChild(h); } </script> </body> </html>