这个也可算是前面的三的2.0版本吧
一.要实现的效果
1.自动生成小方块
2.点击小方块,小方块依次掉下来
二.效果图
三.代码
1.css
<style type="text/css">
div{width: 50px;height: 50px;background: red;}
</style>
2.htnl
null
3.js
<script type="text/javascript">
var str='';
var length=20;
var clock=null;
var oDiv=document.getElementsByTagName('div');
var num=0;
/*创建小方块*/
for (var i = 0; i <length; i++) {
str+='<div style="width:50px;height50px;background:red;position:absolute;top:0;left:'+i*60+'px"></div>';
document.body.innerHTML=str;
}
document.onclick=function(){
clearInterval(clock);
clock=setInterval(function(){
run(oDiv[num],10,500,'top');
num++;
if (num==length) {
clearInterval(clock);
}
},100);
}
function run(obj,dir,target,attr,endFn){
dir=parseInt(getStyle(obj,attr))<target?dir:(-dir);//在函数内部实现正负号
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr))+dir;
// 获取对象当前的attr样式,当前的位置
if (speed<target && dir<0 || speed>target && dir>0) {//走过头
speed=target;
}
// 当前=目的地
if(speed==target){
clearInterval(obj.timer);
/*if( endFn ){//判断函数或者方法的时候,只写函数名(作为属性来判断)
endFn();
}*/
endFn && endFn();
}
obj.style[attr]=speed+'px';
},30);
}
</script>
4.这里我引入了一个外部js
function $(id){
return document.getElementById(id);
}
function getStyle(obj,attr){
}return obj.currentStyle?obj.currentStyle:getComputedStyle(obj)[attr];