JS既存のカウントダウンタイマーからのカウントアップタイマー

-2

私は以下のコードを持っています。このコードを変換して、イベント日付の後に上向きにカウントアップしたいと思います。私は援助を要求してもよろしいですか？JS既存のカウントダウンタイマーからのカウントアップタイマー

$("#countdown").countdown("2016/02/22", function(event) { 
var $this = $(this).html(event.strftime('' 
+ '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"> <span class="countdown-time"> %-D </span> Days </div></div> ' 
+ '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>' 
+ '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>' 
+ '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));});

私の本は、以下のようなものを使用することを言いますが、私は結果を達成することができません:(

$('div#clock').countdown(finalDate, {elapse: true}) 
.on('update.countdown', function(event) { 
if (event.elapsed) { // Either true or false 
    // Counting up... 
} else { 
    // Countdown... 
} });

最初のコードは、イベントに日をカウントします。私は何を達成したいことということですカウントダウンタイマーは1日残っていますが、23日後には、カウントダウン時間が1日目のようにカウントアップされます。

出典

2016-03-22 Pranay

ようこそStackOverflow！このカウントダウン機能とは何ですか？達成しようとしている結果は何ですか？あなたのコードで[jsfiddle]（https://jsfiddle.net/）を作ってみてください。私たちが助けてくれる方が簡単です。 –

最初のコードは、イベントの日数をカウントします。私が達成したいのは、イベントの後にカウンターがカウントアップを開始するということです。つまり、アップルは23日目にiphoneを起動しますが、カウントダウンタイマーは1日残っていますが、23日後にカウントダウンが始まります。 – Pranay

@Pranayこの回答はあなたの質問ですか？他の助けが必要でしたか？ –

ここで動作する例があります。 king example here：jQuery Countdown Count-Up Exampleそしてあなたのコードに合うように修正しました。両方とも以下のコードに含まれていますので、どちらの方法で動作するかを確認できます。ご注意：私はそれが既に通過した日付で動作するようにすることができませんでした。私はカウントダウンがカウントアップされる前に物理的に通過しなければならないと思う。で、私はあなたがそれを10年前に日付を与えることができるとは思わないと自動的に同期させる;私はそれがカウントダウンを開始する前にカウントダウンからスタートし、次にゼロになる必要があると思います（少なくとも、私はそれを動作させることができませんでした、おそらく可能です）。

ダウンロードに問題がある場合は、カウントダウンをインストールして、それに応じて以下のsrcファイルを変更する必要があります。 bowerコンポーネントフォルダは私と同じ場所にないかもしれません:)

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="../bower_components/jquery.countdown/dist/jquery.countdown.js"></script> 
</head> 
<body> 
    <!-- Example from the site will go here: --> 
    <div id="clock" style="height: 150px; width: 150px; background-color: blue"></div> 
    <!-- Your example will go here: --> 
    <div id="countdown" style="height: 150px; width: 150px; background-color: red"></div> 
    <script type="text/javascript"> 
    // The example from the site: 
    var fiveSeconds = new Date().getTime() + 5000; 
    $('#clock').countdown(fiveSeconds, {elapse: true}) 
     .on('update.countdown', function(event) { 

     var $this = $(this); 
     if (event.elapsed) { 
      $this.html(event.strftime('After end: <span>%H:%M:%S</span>')); 
     } else { 
      $this.html(event.strftime('To end: <span>%H:%M:%S</span>')); 
     } 
    }); 

    // Your example: 
    $("#countdown").countdown("2016/12/22", function(event) { 
     if (event.elapsed) { 
      $(this).html(event.strftime('' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> ' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>')); 
     } else { 
      $(this).html(event.strftime('' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> ' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>' 
    + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>')); 
     }}); 
    </script> 
</body> 
</html>

出典

2016-03-22 02:45:44

私はあなたの方法を試みたが、ページはもうロードされません。私は何かが足りないと確信している – Pranay

@Pranay何がロードされませんか？どのようなエラーがありますか？そのように共有したい場合は、コードをjsbinに入れることができます –

JS既存のカウントダウンタイマーからのカウントアップタイマー

答えて

関連する問題