Question

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

我真的希望它是用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);
        });
    });
});

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

Answer 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);
        }
    });
});

Answer 2

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

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

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

倒数计时器，用于同一页面的多个地方

2 个答案: