依次掉落的方块

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

奋斗中的切图猿

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

阅读量237

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/106103692

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

要求：在页面上布局平铺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)
}

奋斗中的切图猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
依次掉落的方块

要求：在页面上布局平铺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"&g
复制链接

扫一扫