1

<div class="countdown"> DATE HERE </div>div: の間から日付 (テキスト)を取得し、1 秒ごとに更新されるカウントダウンを作成するスクリプトを作成しました。

私の質問は次のとおりです。複数の div がある場合<div class="countdown"> DATE HERE </div>、この div からカウントダウンを自動的に作成するスクリプトを作成するにはどうすればよいですか。私の現在のスクリプトは、ページにこのような div が 1 つしかない場合にのみ機能します。

これは私のスクリプトです：

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();テキスト ノードが 1 つだけ読み取られるようにします。それ以外の場合は、日付として正しく解析されない$(".countdown").text();ような文字列になります2013-10-11 2013-10-11 2013-10-11

働くフィドル

于 2013-09-04T23:41:22.930 に答える