3

このマークアップで指定されている日付まで FlipClock JS カウントダウンを作成しようとしています。

<script>
    (jQuery)(document).ready(function() {
        clocks.push((jQuery)('.clock-1').FlipClock(3600, {
            countdown: true,
            clockFace: 'DailyCounter',
        }));
    });
</script> 

<div class="clock-1" data-countdown="15/07/2015 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="15/07/2015 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="16/07/2015 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 22:12:44" style="margin:2em;"></div>
<div class="message"></div>

からの日付+時刻を使用する場合と同様に

data-countdown="21/07/2015 22:12:44"

同じページの複数のインスタンスでそれを行うだけでなく (たとえば、ページごとに 8 つの異なるカウントダウン)

もう 1 つの質問は、これらのカウントダウンをページに 8 つ配置することで、多くのリソースを消費しないかどうかです。

これが私のJSFiddleの例です

CLEAN: https://jsfiddle.net/jx0mmvLq/ (ただし、FlipClock JS ライブラリをインポートできないように見えるため、スクリプトは現在まったく機能しません)

DIRTY: https://jsfiddle.net/haj070g3/1/ (「スクリプト」セクションにライブラリ全体を追加する必要があり、他の方法ではロードできませんでした)

ドキュメントへのリンクを投稿するように求められました (ただし、現在の担当者では 2 つのリンクしか投稿できません)

http://flipclockjs.com/
4

2 に答える 2

1

それでは、まず、 date: の形式を に変更しましょmm/dd/yyyy hh:mm:ssうyyyy/mm/dd hh:mm:ss。

HTML コードは次のようになります。

<div class="clock-1" data-countdown="2015/07/15 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/15 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/16 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 22:12:44" style="margin:2em;"></div>
<div class="message"></div>

プラグインを多くの要素に適用できる場合、プラグインは機能を提供しないようです。では、そうしましょう。$.eachこのプラグインは、要素ごとに使用および適用する必要があります。

また、日付をタイムスタンプに変換する必要があります。JavaScript が提供するDateオブジェクト: new Date('yyyy/mm/dd hh:mm:ss').getTime(). しかし、1970/01/01 00:00:00 からのミリ秒が表示されます。1000で割るだけで問題ありません。

必要なものがもう 1 つあります。秒を取得する場合、1970/01/01 以降を取得しますが、将来の現在の日付で秒を取得したいと考えています。したがって、現在の時刻を取得して、将来の日付から差し引くだけです。

したがって、これらすべてのアクションは次のようになります。

$(document).ready(function() {
    var clocks = [];

    $('.clock-1').each(function() {
        var clock = $(this),
            date = (new Date(clock.data('countdown')).getTime() - new Date().getTime()) / 1000;

        clock.FlipClock(date, {
            clockFace: 'DailyCounter',
            countdown: true
        });

        clocks.push(clock);
    });
});

お役に立てば幸いです。

最後の質問ですが、うまくいくと思います。

于 2015-07-11T10:21:09.670 に答える
0

すべての要素をループして、.clock-11 つずつ初期化するだけです。このような：

  (jQuery)('.clock-1').each(function(){

    var clock = (jQuery)(this).FlipClock(3600, {
        countdown: true,
        clockFace: 'DailyCounter',
    });

    clocks.push(clock);

  });

デモ: https://jsfiddle.net/alan0xd7/haj070g3/2/

リソースの使用に関するご質問については、ページが開いている間に Windows タスク マネージャーをチェックして、CPU の使用量が多すぎるかどうかを判断してください。

アップデート：

データ属性からの時間の取得をサポートするには:

  (jQuery)('.clock-1').each(function(){

    var time = (jQuery)(this).data("countdown");
    time = ((new Date(time))-(new Date().getTime()))/1000;

    var clock = (jQuery)(this).FlipClock(time, {
        countdown: true,
        clockFace: 'DailyCounter',
    });

    clocks.push(clock);

  });

https://jsfiddle.net/alan0xd7/haj070g3/4/

日付形式がYYYY/MM/DD HH:MM:SS

于 2015-07-11T10:04:57.743 に答える