写着写着，画出个这个东西，还挺亮，还是个动态的呢

<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>

相关阅读:
封神台靶机练习第一章：SQL注入攻击原理
 java基础复习-自定义注解1（如何自定义注解？）
java复习预科知识-Markdown学习
 leetcode-888-公平的糖果交换
 leetcode-884-两句话中的不常见单词
 leetcode-139-单词拆分（递归超时，动归解决）
leetcode-134-加油站
 leetcode-91-解码方法（动态规划和递归两种解法）
leetcode-56-合并区间
 leetcode-55-跳跃游戏
原文地址：https://www.cnblogs.com/hailspace/p/3184198.html