依次掉落的方块

最新推荐文章于 2022-10-11 15:12:51 发布

原创最新推荐文章于 2022-10-11 15:12:51 发布 · 315 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js练习题专栏收录该内容

28 篇文章

订阅专栏

要求：在页面上布局平铺20个50X50红色的方块，点击我们的浏览器的窗口时让每个方块每隔200毫秒以每30毫秒7像素的速度掉下来一个，直到所有的方块掉到500的位置

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin:0;
            padding:0;
            list-style:none;
            position:relative;
        }
        li{
            width:50px;
            height:50px;
            background-color:red;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <ul></ul>
    <!-- 要求：在页面上布局平铺20个50X50红色的方块，点击我们的浏览器的窗口时让每个方块每隔200毫秒以每30毫秒7像素的速度掉下来一个，直到所有的方块掉到500的位置 -->
    <script src="myjs.js"></script>
    <script>
        var oUl=document.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var str="";
        // 创建20个li
        for(var i=0;i<20;i++){
            str+="<li></li>";
        }
        oUl.innerHTML=str;
        // 将20个li放在要求的位置上
        for(var i=0;i<aLi.length;i++){
            aLi[i].style.left=i*51+"px";
        }
        // 点击页面让li元素下降
        document.onclick=function(){
            var i=0;
            var timer=setInterval(function(){
                doMove(aLi[i++],2100,{
                    "top" : 500,
                });
                i==20 &&  clearInterval(timer);
            },200);     //有几个i就开启几个计时器（即就是将几个计时器放在列队后）
        }
    </script>
</body>
</html>

myjs.js：

// 获取当前样式函数的封装
// console.log(obj.currentStyle)在IE8及以下为object，在火狐是undefined
function getStyle(obj,attr){  //attr是属性
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

//计时器动画函数封装
function doMove(obj,time,attr,endFn){
    clearInterval(obj.timer);
    var step = [];
    var sx = [];
    var end = [];
    for(var at in attr){
        end.push(attr[at]);
        sx.push(at);
        var thisStep = Math.abs(attr[at] - parseFloat(getStyle(obj,at)))/Math.ceil(time/25);
        thisStep = (attr[at] - parseFloat(getStyle(obj,at)))>0 ? thisStep : -thisStep;
        step.push(thisStep);
    }
    obj.timer = setInterval(function (){
        for(var i=0;i<step.length;i++){
            var newSpace = parseFloat(getStyle(obj,sx[i]))+step[i];
            newSpace = step[i]>0 ? Math.min(newSpace,end[i]): Math.max(newSpace,end[i]);
            obj.style[sx[i]] = sx[i]=="opacity" ?  newSpace : newSpace +"px";
        }
        if(parseFloat(getStyle(obj,sx[0]))==end[0]){
            clearInterval(obj.timer); //到达关闭计时器
            endFn && endFn();
        }
    },25)
}