JavaScriptでカウントダウンタイマーを作る #JavaScript

HTML + CSS + JavaScript でカウントダウンタイマーを作りました。ソースコードに直接記述した日時までカウントダウンします。

URL
https://cordelia-sixth.github.io/countdown_timer_js/

ソースコード
https://github.com/cordelia-sixth/countdown_timer_js

ディレクトリ構成

app
 ├── index.html
 ├── script.js
 ├── style.css
 └── background.jpeg

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Time left in 2021</h1>

  <div class="countdown-container">
    <div class="countdown-elm">
      <p class="time-text" id="days">0</p>
      <span>days</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="hours">0</p>
      <span>hours</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="mins">0</p>
      <span>mins</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="seconds">0</p>
      <span>seconds</span>
    </div>
  </div>
</body>
</html>

script.js

const daysElm = document.getElementById('days');
const hoursElm = document.getElementById('hours');
const minsElm = document.getElementById('mins');
const secondsElm = document.getElementById('seconds');

// ここに好きな日時を記述する
// 西暦 月　日
const target = '2022 1 1';

function countDown() {
  const targetDate = new Date(target);
  const currentDate = new Date();

  const totalSeconds = (targetDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const mins = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds % 60);

  daysElm.innerHTML = days;
  hoursElm.innerHTML = formatTime(hours);
  minsElm.innerHTML = formatTime(mins);
  secondsElm.innerHTML = formatTime(seconds);
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

setInterval(countDown, 1000);

countDown()がタイマー処理です。setInterval()により1秒ごとに呼び出されて時間が更新されます。

formatTime()で表示される時間を整形しています。時間、分、秒が10以下の場合は常にゼロを表示させてレイアウトが崩れるのを防いでいます。

style.css

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-image: url(./background.jpeg);
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
}

h1 {
  font-weight: normal;
  font-size: 4rem;
  margin-top: 5rem;
}

.countdown-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.time-text {
  font-weight: bold;
  font-size: 6rem;
  line-height: 1;
  margin: 1rem 2rem;
}

.countdown-elm {
  text-align: center;
}

.countdown-elm span {
  font-size: 1.2rem;
}

終わりに

時間の計算方法がとても勉強になりました。こういった単位換算が苦手なので...。次は日時を入力できるフォームを追加したり、複数のタイマーを表示できるようにしてみたいですね！

読んでいただきありがとうございました！フィードバックしていただけたら嬉しいです！

URL
https://cordelia-sixth.github.io/countdown_timer_js/

ソースコード
https://github.com/cordelia-sixth/countdown_timer_js

参考

リンク

Github
https://github.com/cordelia-sixth

Products
https://raindrop.io/cordelia/my-products-18715918

Qiita
https://qiita.com/cordelia

Twitter
https://twitter.com/cordelia_sixth