javascript setInterval createElement 

<!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;
}

function add(){
    if(i===400){
        clearInterval(iA);
        return false;
    }
    var h = createH();
    document.getElementById('box').appendChild(h);
}
var iA = setInterval(add,10);
</script>
</body>
</html>

　　这个例子是博客园上面看到的，拿下来。只是让自己有空看下别人好的想法，只要有好的想法javascript就能让页面飞起来

posted @ 2013-07-14 23:16  -恩恩-  阅读(255)  评论(0)  编辑  收藏  举报