Question

所以我有这个代码隐藏某些div，我想在html代码中添加div关闭的秒数，例如：5,4,3,2,1，（已关闭）;

以下是代码：

<script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                cvr.hide();
                dlg.hide();
            }, 5000);
        }
    });
</script>

任何sugestions？

Answer 1

解决方案：

 jQuery(document).ready(function () {
    var cvr = $("#cover");
    var dlg = $("#dialog");
    var t = 5;
    isVisibleCvr = cvr.is(":visible");
    isVisibleDlg = dlg.is(":visible");
    if(isVisibleCvr && isVisibleDlg == true){
        (function countDown(){
            if (t--) {
               $('#t').text(t + ' s');
               setTimeout(countDown, 1000);
            } else {
               $('#t').text('gone!');
               cvr.add(dlg).hide();
            }
        })();
    }
});

我认为代码是自我解释的。如果没有，请要求澄清。

Demonstration

Answer 2

您可以使用setInterval功能，使用以下脚本：（demo）

<script type="text/javascript">
 jQuery(document).ready(function () {

  var counter = 5;
  var interval = setInterval(function() {
      counter--;
      jQuery("#number").html(counter);
      if (counter == 0) {
        //Do something
        jQuery("#number").html("Countdown ended!");
        // Stop the counter
        clearInterval(interval);
      }
  }, 1000);

 });
 </script>

以及以下div：

<div id="number">5</div>

查看jsFiddle上的现场演示：http://jsfiddle.net/RtFKr/

Answer 3

假设您的javascript代码正常运行，您可以使用：

    <script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var countdown = 5;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                if(--countdown == 0)
                {
                    cvr.hide();
                    dlg.hide();
                }
                else
                {
                    // set text in div
                }
            }, 1000);
        }
    });
</script>

每秒倒计时都会降低，0会隐藏你的div。

jquery show timeout倒计时输出

3 个答案: