掉落div——点击div，div一个个往下掉落 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script src="miaov.js"></script>
<script>
window.onload = function () {
    var str = '';
    var len = 20;   //有多少个div
    var aDiv = document.getElementsByTagName('div');
    var timer = null;  //定时器变量
    var num = 0; //第几个div
    
    for ( var i=0; i<len; i++ ) {   //设定几个添加几个div
        str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
    }
    
    document.body.innerHTML = str;  //添加到页面上
    
    document.onclick = function () {   //点击开始掉落
        clearInterval( timer );  //防止重复点击先清除定时器
        timer = setInterval( function (){   //100毫秒执行一次，开始掉落下一个
            doMove( aDiv[num], 'top', 23, 500 );  //用到封装的元素移动的函数，在封装的文章的第三个
            num ++;   //执行完开始下一个div
            if ( num === len ) {   //如果div等于给定的个数的时候停止运行
                clearInterval( timer );
            }
        }, 100 );
    };
};
</script>

</head>

<body>
</body>
</html>

 

posted @ 2017-03-22 15:48  念念念不忘  阅读(531)  评论(0)    收藏  举报