16-javascript 弹框倒计时关闭例子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("box");
            var oBtn = document.getElementById("btn");
            var oCon = document.getElementById("con")
            var time = 5;
            
            oBtn.onclick = function(){
                oDiv.style.display = "block";
                count = setInterval(timer,1000)
                }

            function timer()
                {
                    
                    time--;
                    oCon.innerHTML="还有" + time + "秒钟关闭";
                    
                    if(time==0){  
                    oDiv.style.display = "none";
                    oCon.innerHTML='还有5秒钟关闭';
                    clearInterval(count);
                    time = 5
                    }
                    
                } 
                    
        }        

    </script>
    <style>
        .box{
           
            width:300px;
            height:200px;
            border:1px solid #666;
            margin:50px auto 0;
            background-color:gold;
            position: relative;
            display: none;
        }

        .con{
     
            font-size: 20px;
            text-align: center;
            line-height:180px;
            background-color: red

        }
        .title{
       
            height:20px;
            font-size: 15px;
        }
    </style>

</head>
<body>
    <input type="button" value="弹出" id="btn">
    <div class="box" id="box">
        <div class="title">TITLE</div>
        <div class="con" id="con">还有5秒钟关闭</div>
    </div>
</body>
</html>

 

posted @ 2019-03-21 02:34  greenfan  阅读(362)  评论(0)    收藏  举报