Question

我创建了一个脚本，它从div：<div class="countdown"> DATE HERE </div>之间取日期（文本），并从中进行倒计时，每1秒刷新一次。

我的问题是：如果我有多个div <div class="countdown"> DATE HERE </div>，如何让脚本自动从这个div创建倒计时。我当前的脚本只有在页面中只有一个这样的div时才有效。

这是我的剧本：

var targetDate = $(".countdown").text();
targetDate = new Date(targetDate).getTime();



// porneste counter-ul
setInterval(function() {

    var currentDate = new Date().getTime();
    var secondsLeft = (targetDate - currentDate) / 1000;


    var days = parseInt(secondsLeft / 86400);
    secondsLeft = secondsLeft % 86400;

    var hours = parseInt(secondsLeft / 3600);
    secondsLeft = secondsLeft % 3600;

    var minutes = parseInt(secondsLeft / 60);
    seconds = parseInt(secondsLeft % 60);


    // afiseaza data rezultata
    $(".countdown").html('<table cellspacing="0" border="0" cellpadding="0" width="328" align="center"><tr>    <td width="82">'+days+'<span class="gray_text">d</span></td>    <td width="82">'+hours+'<span class="gray_text">h</span></td>    <td width="82">'+minutes+'<span class="gray_text">m</span></td>    <td width="82">'+seconds+'<span class="gray_text">s</span></td>    </tr></table>');   


}, 1000);

Answer 1

您需要使用.each()。类似的东西：

$('.countdown').each(function() {
    var $this = $(this),
        text = $this.text(),
        targetDate = new Date(text).getTime();

    setInterval(function() {
        var currentDate = new Date().getTime();
        var secondsLeft = (targetDate - currentDate) / 1000;        

        var days = parseInt(secondsLeft / 86400);
        secondsLeft = secondsLeft % 86400;

        var hours = parseInt(secondsLeft / 3600);
        secondsLeft = secondsLeft % 3600;

        var minutes = parseInt(secondsLeft / 60);
        seconds = parseInt(secondsLeft % 60);

        // afiseaza data rezultata
        $this.html('<table cellspacing="0" border="0" cellpadding="0" width="328" align="center"><tr>    <td width="82">'+days+'<span class="gray_text">d</span></td>    <td width="82">'+hours+'<span class="gray_text">h</span></td>    <td width="82">'+minutes+'<span class="gray_text">m</span></td>    <td width="82">'+seconds+'<span class="gray_text">s</span></td>    </tr></table>');   
    });
});

Answer 2

您是否尝试过each()方法？如果没有，请测试它 $("div.countdown").each(function() { //do something. });

Answer 3

将行$(".countdown").text();更改为$(".countdown:first-child").text();，以便只读取一个文本节点。否则$(".countdown").text();将成为2013-10-11 2013-10-11 2013-10-11之类的字符串，它不能正确解析日期

Working Fiddle

Answer 4

如果所有div都包含相同的日期，则必须获取第一个（或任何其他...）的日期，以便您必须更改此行：

var targetDate = $($(".countdown")[0]).text();

如果每个div都有自己的日期，那么解决方案会有点困难。您可以设置每个div的初始值并将其存储在DOM中的“data-x”属性中，然后在setinterval函数中，您必须设置一个循环并读取为每个div存储的初始值。例如，要存储所有值：

function storeDates(){
    $(".countdown").attr("data-initialDate", $(".countdown").html());}

如何用倒计时替换特定的div内容

4 个答案: