こんにちはkazuです。
本日はjavascriptで2022年までのカウントダウンタイマーを作ってみましたので、
そのコードを解説していきます。
アプリの説明
まずは、アプリの説明をしていきます。
といってもたいして説明することはなく
ただ2021現時点から2022年1月1日0：00までの
カウントダウンを行うアプリになります。
今回もレイアウト自体はHTMLしかしようしていないので、
しょぼいレイアウトですがjavascriptの解説なので
そこはご了承ください。
以下アプリ画像です。
ではイメージがついたと思いますので、実際にコードを見てみましょう。
コードを確認する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CountdownTimer</title>
</head>
<body>
<h1 class="countdown-title">
<span id="year" ></span>
年度 カウントダウン
</h1>
<div>
<span id="days"></span>
日
</div>
<div>
<span id="hours"></span>
時
</div>
<div>
<span id="minutes"></span>
分
</div>
<div>
<span id="seconds"></span>
秒
</div>
<script>
// 今年の値を取得
const current_year = new Date().getFullYear();
// 来年の値を取得
const next_year = current_year + 1;
const new_year_time = new Date(`January 01 ${next_year} 00:00:00`);
document.getElementById('year').innerHTML = next_year;
// カウントダウンの関数
function update_countdown() {
// 現在の時刻情報を取得する
const current_time = new Date();
// 現在の時間と新年の時間の差を計算する（ミリ秒単位）
const diff = new_year_time - current_time;
// 現在から新年までの日数を計算
const day = Math.floor(diff / 1000 / 60 / 60 / 24);
// 時間を計算
const hour = Math.floor(diff / 1000 / 60 / 60) % 24;
// 分を計算
const minute = Math.floor(diff / 1000 / 60) % 60;
// 秒を計算
const second = Math.floor(diff / 1000) % 60;
document.getElementById('days').innerHTML = day;
// 三項演算子 10以下の数値は0がつく
document.getElementById('hours').innerHTML = hour < 10 ? '0' + hour : hour;
document.getElementById('minutes').innerHTML = minute < 10 ? '0' + minute : minute;
document.getElementById('seconds').innerHTML = second < 10 ? '0' + second : second;
}
// ページロード時に関数を実行
update_countdown();
// 1秒ごとに関数を実行
setInterval(update_countdown, 1000);
</script>
</body>
</html>最後に
いかがでしたでしょうか？
今回と前回でjavascriptで「時間」を使ったコードを書いてみました。
時間についてはjavascriptに限らず実務で使用する機会があると思いますので、
知っておいて損はないと思います。
最後までご覧いただきありがとうございました。
関連記事
こんにちはkazuです。 本日はjavascriptでアラームとタイムセールを知らせるプログラムを作ってみたので、 そのコードを解説していきます。 はじめに 今回はどのようなプログラムを作ったかといいますと、 特定の時間を変数に入[…]