IE 中的 jQuery 倒计时功能

发布于 2024-12-13 09:40:27 字数 468 浏览 0 评论 0原文

我在使用 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);
});

原文

I'm having a strange issue with IE8 and below where my countdown that's only supposed to fire once keeps fireing, something that doesn't happen in modern browsers. Is there any way to fix this? Thanks! The goal is to have a countdown start once an input is selected.

Code:

$("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);
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒中人 2024-12-20 09:40:27

尝试这样：

$("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>

Try it this way:

$("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);
}

Edit:
You need to create a loop for the counting down. So what i basicly do is starting with 60 wait a sec and recall the function again but then with 59.. etc. etc. when its 0 it doesnt call the function anymore so it stopt

Edit:
I have test it the following and it worked :) counting down very well

<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>

回复收藏 0 原文

~没有更多了~