IE中的jQuery倒计时功能

时间:2011-11-02 11:51:38

标签: jquery internet-explorer countdown

我在IE8及其下面遇到一个奇怪的问题,我的倒计时只会触发一次,这在现代浏览器中不会发生。有没有什么办法解决这一问题?谢谢!目标是在选择输入后开始倒计时。

代码:

$("input").focus (function counter() {
  $("input").unbind('focus', counter);
  var count = 60;
  countdown = setInterval(function(){
    $(".clock p").html(count);
    if (count == 0) {
      $(".while-ticking").fadeOut(1000);
      $(".countdown-finished").fadeIn(1000);
    }
    else {
        count--;
    }
  }, 1000);
});

1 个答案:

答案 0 :(得分:0)

以这种方式尝试:

$("input").focus(function() { counter(60) });

function counter(count) {
    $("input").unbind('focus');
    setTimeout(function(){
        $(".clock p").html(count);
        if (count == 0) {
            $(".while-ticking").fadeOut(1000);
            $(".countdown-finished").fadeIn(1000);
        }
        else {
            counter(count--);
        }
    }, 1000);
}

修改 您需要为倒计时创建一个循环。所以我基本上做的是从等待一秒开始60再次调用该函数然后用59 ..等等当它的0它不再调用该函数所以它停止

修改 我已经测试了以下它并且它工作了:)非常好地倒计时

<script type="text/javascript" src=".............../jquery-1.4.4.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $("input").focus(function() { counter(60) });

    });

    function counter(count) {
        $("input").unbind('focus');
        $(".clock p").html(count);
        setTimeout(function(){
            if (count == 0) {
                $(".while-ticking").fadeOut(1000);
                $(".countdown-finished").fadeIn(1000);
            }
            else {
                console.log(count--);
                counter(count--);
            }
        }, 1000);
    }

</script>


<input type="text" />

<div class="clock">
    <p></p>
</div>