点击任意位置,红色方块都会依次落下;
首先引用动画文件doMove.js,动画函数是封装好的,具体参考上篇文章:
<script src="doMove.js"></script>
js:
var str = '';
var len = 20;
var oDiv = document.getElementsByTagName('div');//选中页面上的所有div元素
var timer = null;//开定时器
var num = 0;//num是红色小方块的序号
for(var i= 0;i<len;i++){//给页面动态添加红色小方块标签
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(){// 在页面中任何一个地方点击,div会像下雨一样落下
clearInterval(timer);// 开定时器之前为了防止用户连续点击,所以要先清除定时器
timer = setInterval(function(){
doMove(oDiv[num],'top',23,500);//从第0个开始往下掉,依次下落,所以要写一个变量num存储;top是往下掉
num ++;//红色小方块序号自动加1
if(num === len){//如果num的值等于div元素的个数(全部都掉下来),那么关闭定时器
clearInterval(timer);
}
},100);
}