ネットで調べた以下のコードをカスタマイズしていますがうまく動かなくて困っています。
変更したい点は
指定した日時に向けてカウントダウンする
↓
ページにアクセスした時点から10分後に向けてカウントダウンする
です。
◼︎元のコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>カウントダウンタイマー</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function() { countDown(); }); function countDown() { var startTime = new Date(); //カウントダウンの終了期日を記入↓ var endTime = new Date('December 24,2012, 01:00:00'); var diff = endTime - startTime; var times = 24 * 60 * 60 * 1000; var day = Math.floor(diff / times) var hour = Math.floor(diff % times / (60 * 60 * 1000)) var min = Math.floor(diff % times / (60 * 1000)) % 60 var sec = Math.floor(diff % times / 1000) % 60 % 60 var ms = Math.floor(diff % times / 10) % 100 if(diff > 0){ $("#Timer").text(day + '日' + hour + '時間' + min + '分' + sec +'秒' + ms); setTimeout('countDown()', 10); } else { //終了した時のテキスト $("#Timer").text('終了しました!'); } } </script> </head> <body> <div class="container"> <h1>jQueryのカウントダウンタイマー</h1> <blockquote> <div id="Timer"></div> </blockquote> </div> </body> </html>
イメージとしては
setTimeout('countDown()', 10); で再帰呼び出しする際に
引数で経過時間を渡して差分を毎回計算できないかと考え色々試しましたが嵌ってしまいました。
初歩的な質問で申し訳ないですがお助けいただければ幸いです。
よろしくお願いいたします。
◼︎追記要請をいただいたので、以下、書きかけのコードを記載します
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>カウントダウンタイマー</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function() { var startTime = new Date(); var endTime = new Date(Date.now() + 600000); var diff = endTime - startTime; countDown(diff); }); function countDown(diff) { //var endMsec = Date.now() + 600000; var startTime = new Date(); var endTime = new Date(Date.now() + diff); var diff = endTime - startTime; var times = 24 * 60 * 60 * 1000; var day = Math.floor(diff / times) var hour = Math.floor(diff % times / (60 * 60 * 1000)) var min = Math.floor(diff % times / (60 * 1000)) % 60 var sec = Math.floor(diff % times / 1000) % 60 % 60 var ms = Math.floor(diff % times / 10) % 100 if(diff > 0){ $("#Timer").text(day + '日' + hour + '時間' + min + '分' + sec +'秒' + ms); setTimeout(function(){ countDown(diff); }, 10); } else { //終了した時のテキスト $("#Timer").text('終了しました!'); } } </script> </head> <body> <div class="container"> <h1>jQueryのカウントダウンタイマー</h1> <blockquote> <div id="Timer"></div> </blockquote> </div> </body> </html>
中途半端に書きかけのものになりお恥ずかしいですがよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー