WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

カウントダウン

デモ
http://efu.sakura.ne.jp/web/countdown/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウントダウン</title>
</head>
<body>
  <p>2100年1月1日まで</p>
  <p class="countdown"></p>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
$(function(){
  countDown();
});

function countDown() {
  var startDateTime = new Date();//現在の日時
  var endDateTime = new Date("January 01,2100 00:00:00");//カウントダウン終了の日時
  var diff = endDateTime - startDateTime;//現在の日時からカウントダウン終了の日時の差
  var day_s = 24 * 60 * 60 * 1000;//一日のミリ秒
  var d = Math.floor(diff / day_s);//日
  var h = Math.floor((diff % day_s) / (60 * 60 * 1000));//時間
  var m = Math.floor((diff % day_s) / (60 * 1000)) % 60;//分
  var s = Math.floor((diff % day_s) / 1000) % 60 % 60;//秒
  $(".countdown").text(d + '日' + h + '時間' + m + '分' + s + '秒');
  setTimeout('countDown()', 1000);
}

関連記事
mmmmofu.hatenablog.com

mmmmofu.hatenablog.com

広告を非表示にする