1

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

我的问题是：如果我有多个 divs <div class="countdown"> DATE HERE </div>，我怎样才能让脚本自动从这个 divs 创建倒计时。我当前的脚本只有在页面中只有一个这样的 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);
4

4 回答 4

3

你会想要使用.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>');   
    });
});
于 2013-09-04T23:43:19.923 回答
0

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

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

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

function storeDates(){
    $(".countdown").attr("data-initialDate", $(".countdown").html());}
于 2013-09-05T00:02:00.793 回答
0

你试过这个each()方法吗？如果没有，请测试它 $("div.countdown").each(function() { //do something. });

于 2013-09-04T23:41:12.817 回答
0

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

工作小提琴

于 2013-09-04T23:41:22.930 回答