编辑：版本2

Question

我只想在弹出窗口关闭后弹出一个10秒的倒数计时器。

当加载弹出窗口时，我需要在弹出窗口中显示10秒倒计时。一旦10秒钟过去，弹出窗口应该关闭。

这是我到目前为止尝试过的代码：

<html>
<head>
<title>Popup Box DIV</title>
<style type="text/css">
#popup_box {
    display: none; /* Hide the DIV */
    position: fixed;
    _position: absolute; /* hack for internet explorer 6 */
    height: 500px;
    width: 500px;
    background:;
    left: 400px;
    top: 50px;
    z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 25px;
    /* additional features, can be omitted */
    border: 2px;
    padding: 15px;
    font-size: 15px;
    -moz-box-shadow: 0 0 5px;
    -webkit-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;
}
#container {
    background:; /*Sample*/
    width: 100%;
    height: 100%;
}
a {
    cursor: pointer;
    text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size: 20px;
    line-height: 15px;
    right: 5px;
    top: 5px;
    position: absolute;
    color: #6fa5e2;
    font-weight: 500;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">        
$(document).ready( function() {

    // When site loaded, load the Popupbox First
    loadPopupBox();

    $('#popupBoxClose').click( function() {            
        unloadPopupBox();
    });

    $('#container').click( function() {
        unloadPopupBox();
    });

    function unloadPopupBox() {    // TO Unload the Popupbox
        $('#popup_box').fadeOut("slow");
        $("#container").css({ // this is just for style        
            "opacity": "1"  
        }); 
    }    

    function loadPopupBox() {    // To Load the Popupbox
        $('#popup_box').fadeIn("slow");
        $("#container").css({ // this is just for style
            "opacity": "0.3"  
        });         
    }        
});
</script>
</head>
<body>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
    <h1>it closed  after 10 sec</h1>
    <a id="popupBoxClose">Close</a> </div>
<div id="container"> <!-- Main Page -->
    <h1></h1>
</div>
</body>
</html>

Answer 1

您需要使用setInterval。这将每隔x个时间点发一个函数（在这种情况下为1000毫秒或1秒）。此函数负责减少计数器变量，直到达到0，此时它会卸载弹出窗口并使用clearInterval停止再次运行。

http://jsfiddle.net/chrissp26/8ygva6hm/

向H1添加ID，如下所示：

<h1 id="countDown">it closed  after 10 sec</h1>

并将您的JavaScript更改为：

$(document).ready( function() {

    // When site loaded, load the Popupbox First
    loadPopupBox();

    $('#popupBoxClose').click( function() {            
        unloadPopupBox();
    });

    $('#container').click( function() {
        unloadPopupBox();
    });

    function unloadPopupBox() {    // TO Unload the Popupbox
        $('#popup_box').fadeOut("slow");
        $("#container").css({ // this is just for style        
            "opacity": "1"  
        }); 
    }    

    function loadPopupBox() {    // To Load the Popupbox

        var counter = 10;
        var id;
        $('#popup_box').fadeIn("slow");
        $("#container").css({ // this is just for style
            "opacity": "0.3"  
        });

        id = setInterval(function() {
            counter--;
            if(counter < 0) {
                clearInterval(id);

                unloadPopupBox();
            } else {
                $("#countDown").text("it closed  after " + counter.toString() + " seconds.");
            }
        }, 1000);

    }        
});

编辑：版本2

这是您可能喜欢的其他版本。该脚本是完全封装的，因此更加整洁。它还具有更平滑的动画过渡等。

http://jsfiddle.net/chrissp26/8ygva6hm/2/

Answer 2

在这种情况下使用setTimeout似乎更直接，你可以定义一个这样的函数：

function closeAfter(delay){
  if(delay == 0) unloadPopupBox();
  else {
    $('#popup_box h1').html("it closed after " + delay + " sec");
    setTimeout(function(){closeAfter(delay-1)}, 1000);
  }
}

然后在您想要的地方使用它：

function loadPopupBox() {    // To Load the Popupbox
    $('#popup_box').fadeIn("slow");
    $("#container").css({ // this is just for style
        "opacity": "0.3"  
    });   
    //at here ...
    closeAfter(10);
}

Answer 3

  <html>

    <script type="text/javascript">

   function submitForm()

      {

   document.getElementById("ismForm").submit();

   }

   function ten()
   {

   confirm("press OK button!!!");

   if (document.getElementById("ismForm")) {

   setTimeout("submitForm()", 10000);

   }

   }

   </script>

   <script type="text/javascript">

   var interval;

       var minutes = 0;

var seconds = 10; 

       window.onload = function() 

   {

    countdown('countdown');

       }

       function countdown(element) 
   {


    interval = setInterval(function() {

        var el = document.getElementById(element);

        if(seconds == 0) {

            if(minutes == 0) {

              (el.innerHTML = "countdown's over!");                    

                clearInterval(interval);

                return;

            } else {
                minutes--;

                seconds = 60;

            }

        }

        if(minutes > 0) {

            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');

        } else {

            var minute_text = '';

        }

        var second_text = seconds > 1 ? 'seconds' : 'second';

        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';


        seconds--;

    }, 1000);

}
   </script> 

   </head>

   <body> <center> use the timer to see count down of 10 seconds 

   <input type="button" onclick="minutes=0;seconds=10;" value="CLICK TO START FROM 10 SECONDS"  />

  <div id='countdown'></div> </center> <br><br>

  </html>

如何在弹出窗口中添加10秒倒数计时器

3 个答案:

编辑：版本2