js实现倒计时+div下落

最新推荐文章于 2022-04-29 17:05:26 发布

bakan66065136006

最新推荐文章于 2022-04-29 17:05:26 发布

阅读量333

点赞数

原文链接：http://www.cnblogs.com/renqiaoqiao/p/11567192.html

版权

全部由js动态生成结点，body内无内容

<style>
    #count{
        position: absolute;
        text-align: center;
        width: 240px;
        height: 260px;
        top: 230px;
        left: 750px;
        margin: 0;
        border: 10px black solid;
        border-radius: 240px;
        font-size: 200px;
    }
    .block{
        background: red;width: 50px;
        height: 50px;
        display: inline-block;
        margin-left: 15px;
        position: absolute;
        top: 20px;
        left: 0;
    }
</style>
<body></body>
<script>
    var oBody=document.getElementsByTagName('body')[0];
    function countDown() {
        oBody.innerHTML='<div id="count">3</div>';
        var oDiv=document.getElementById('count');
        oDiv.timer=setInterval(function () {
            oDiv.innerText=parseInt(oDiv.innerText)-1;
            if (oDiv.innerText==0)
            {
                clearInterval(oDiv.timer);
                show();     //调用show()方法
            }
        },1000);
    }
    countDown();
    function show() {  //动态生成n个小方块
        oBody.innerText='';
        for (var i=0;i<23;i++){
            oBody.innerHTML+="<div class='block' style='top: 20px;left:"+i*70+"px;'></div>"
        }
        var timer=null;
        var num=0;
        var aDiv=document.getElementsByTagName("div");
        timer=setInterval(function () {
            drop(aDiv[num]);
            num++;
            if (num===aDiv.length){
                clearInterval(timer);
            }
        },100);
    }
    function drop(obj) {             //把当前小方块向下掉
        obj.timer=setInterval(function () {
            obj.style.top=parseInt(obj.style.top)+50+'px';
            if (parseInt(obj.style.top)>800){
                obj.style.top=800+'px';
                clearInterval(obj.timer);
            }
        },50);
    }
</script>

转载于:https://www.cnblogs.com/renqiaoqiao/p/11567192.html

bakan66065136006

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现倒计时+div下落

全部由js动态生成结点，body内无内容<style> #count{ position: absolute; text-align: center; width: 240px; height: 260px; top: 230px; left: 750...
复制链接

扫一扫