码迷,mamicode.com
首页 > Web开发 > 详细

js实现倒计时+div下落

时间:2019-09-22 14:44:44      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:play   text   time   get   back   nts   abs   int   cti   

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

标签:play   text   time   get   back   nts   abs   int   cti   

原文地址:https://www.cnblogs.com/renqiaoqiao/p/11567192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!