js实现倒计时+div下落

Posted 2022-11-22 renqiaoqiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现倒计时+div下落相关的知识，希望对你有一定的参考价值。

全部由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>

以上是关于js实现倒计时+div下落的主要内容，如果未能解决你的问题，请参考以下文章

destoon开发笔记-JQ+JS实现倒计时功能