倒计时 Jquery

Question

我对 jquery 有疑问，我使用以下代码获取 json 格式的日期，此代码工作正常。

在 console.log(tiempo) 我可以看到这个日期

2015/11/21 12:34:56
ex.html:15 2016/10/10 12:34:56
ex.html:15 2017/10/10 12:34:56
ex.html:15 2018/10/10 12:34:56
ex.html:15 2019/10/10 12:34:56

但是在 HTML 中我只能看到我从 json 收到的第一个日期。

<script type="text/javascript">
    function tiempo(tiempo){
        console.log(tiempo);
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    jQuery.each(arr, function(index, value) {
        $( ".prueba" ).append('<div class="clock"></div>');
        tiempo(value.now);
    });
</script>

有图更好解释

更新

这段代码，我只显示一个日期

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

<script type="text/javascript">
    function tiempo(tiempo){
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    for ( var i = 0 ; i < arr.length ; ++i ) {
        tiempo(arr[i].now);
    }
</script>

Answer 1

您可以使用标准 for 循环遍历对象：

var arr = [
    {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
    {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
    {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
    {"transporte":"Metro","now":"2018/10/10 12:34:56"},
    {"transporte":"Tram","now":"2019/10/10 12:34:56"}
];
for ( var i = 0 ; i < arr.length ; ++i ) {
    console.log(arr[i].now);
    $( ".prueba" ).append('<div class="clock"></div>');
    tiempo(value.now);
}

Answer 2

问题在于这段代码（特别是选择器：.clock）：

$('.clock').countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
 });

您在这里所做的是使用 class clock 设置所有 div 元素的值，而不仅仅是您创建的最后一个元素。

您的问题有多种解决方案，但需要最少更改的解决方案是像这样使用 jquery 函数 last（从设置):

$('.clock').last().countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

Answer 3

做这个：

for (var i = 0; i < arr.length; ++i) {
    var element = $('<div class="clock"></div>').html(tiempo(value.now));
    $(".prueba").append(element);
}

就这些了

倒计时 Jquery

Countdown Jquery

jquery

countdown