0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-06-20

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

スクリーンショット 2021-06-20 21.35.02.png

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

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?