0

我想制作一个倒数计时器，可以在同一页面的多个地方使用 - 所以我认为它应该以某种方式成为一个功能。

我真的希望它是用 jQuery 制作的，但我不能用我的代码来实现它。例如，我在一个页面中有 10 个产品，我需要制作一个倒数计时器 - 当计时器为 0 时，我需要它来隐藏产品。

我的代码是：

$(document).ready(function(){

    $(".product").each(function(){

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;
            var elm = $(this).attr('id');
            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

编辑1：

$(document).ready(function(){

    $(".product").each(function(){
            var elm = $(this).attr('id');           

        $(function(){
            var t1 = new Date()
            var t2 = new Date()
            var dif = t1.getTime() - t2.getTime()

            var Seconds_from_T1_to_T2 = dif / 1000;
            var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);

            var count = Seconds_Between_dates;

            alert(elm);
            countdown = setInterval(function(){
                $(elm + " .time_left").html(count + " seconds remaining!");
                if (count == 0) {
                    $(this).css('display','none');
                }
                count--;
            }, 1000);
        });
    });
});

您对此有什么解决方案吗？

4

2 回答 2

1

您的问题似乎this不是指当前的 DOM 元素（来自each），而是指向window- 从setTimeout.

除此之外，您有一个不必要的 domReady 包装器，忘记了#id 选择器上的 ，应该使用缓存的引用并且永远不要依赖 的时间setInterval，这可能会非常漂移。用这个：

$(document).ready(function(){
    $(".product").each(function(){
        var end = new Date(/* from something */),
            toUpdate = $(".time_left", this);
            prod = $(this);
        countDown();

        function countdown() {
            var cur = new Date(),
                left = end - cur;
            if (left <= 0) {
                prod.remove(); // or .hide() or whatever
                return;
            }
            var sec = Math.ceil(left / 1000);
            toUpdate.text(sec + " seconds remaining!"); // don't use .html()
            setTimeout(countdown, left % 1000);
        }
    });
});
于 2012-09-22T16:19:34.460 回答
1

我可能会使用单个间隔函数来检查所有产品。像这样的东西：

$(function() {

    /* set when a product should expire.
       hardcoded to 5 seconds from now for demonstration
       but this could be different for each product. */
    $('.product').each(function() {
        $(this).data('expires', (new Date()).getTime() + 5000);
    });

    var countdown_id = setInterval(function() {
        var now = (new Date()).getTime();
        $('.product').each(function() {
            var expires = $(this).data('expires');
            if (expires) {
                var seconds_remaining = Math.round((expires-now)/1000);
                if (seconds_remaining > 0) {
                    $('.time-left', this).text(seconds_remaining);
                }
                else {
                    $(this).hide();
                }
            }
        });
    }, 1000);
});

当没有任何东西可以过期时，您也可以取消间隔功能。

于 2012-09-22T16:46:09.183 回答