2022.2.12 更新
Photo on Foter.com
皆さまごきげんよう。
いきなりですが、メニューバーの右上の辺りをごらんください。
いつの間にか「2020東京五輪まであと◯日」というものが出現しております!(2022現在は万博カウントダウンに変更しております)
本日はjavascriptでカウントダウンタイマーを作ってみます。
目次
- javascriptで時間を取得する
- setIntervalとsetTimeoutの違い
- jQueryでhtmlファイルに出力する
javascriptで時間を取得する
簡単に言うと、オリンピックの日付から今日の日付を引いた日数を計算し、htmlに表示させるプログラムを書きます。
カウントダウンタイマーを作るための基本は、時間の取得です。
これを作ることで時間の取得の使い方を覚えてしまいましょう!
下記が、このオリンピックまでのカウントダウンタイマーのソースです。
やっていることをざっくり説明すると、
- 最初にcountdowntimerという関数を作る
- 関数の中身に、setTimeoutで時間の取得〜ループ処理、指定の時間になったらclearTimeoutでタイマーを止める、という処理を書く
- 最後にcountdowntimer関数を呼び出す
function countdowntimer(){
var countdown = setTimeout(function(){
var today = new Date();//今の日時
var targetDay = new Date('2020/7/24 20:00:00');//開催日の日時
var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
var remainDay = (targetDay - today);//残り日時
if (remainDay >= 0){//もし残りの日時が0より多かったら、
var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h=3600000ms)
var h1 = h % 24;//hを24で割った余り。ここでは使っていないが、残り○時間を取得したい時に。
var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分=60000 ms)
var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒=1000ms)
$("#countdown").html("2020東京五輪まであと" + daysBetween + "日です!");//文中にhtmlタグを使いたい場合はhtmlメソッド使う
if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
clearTimeout(countdown);//カウントダウンを止める
$("#countdown").text("2020東京五輪開催です!");//htmlに出力
}
}else{//指定の日時が過ぎてもテキストを表字させる用
$("#countdown").text("祝2020東京五輪開催!");
}
}, 1000);//処理を1秒後に予約
}
countdowntimer();//関数を呼び出す
一行ごとの説明はコメントアウトした通りですが、ポイントは
- new Date()で今日の日付一式のデータを取得する
- new Date(‘2020/7/24 20:00:00’);の様に(‘ ‘)の中に指定の日付を入れて、指定日の時間を取得する
- 日付は整数なのでMath.ceilメソッドで小数点以下の端数を切り上げる
- 指定日から本日の時間の差分を求める
- if文で、残り時間が0より多かったら、0になったら、指定時間経過後、の3パターン分htmlに表示させる指定をする
- 残り時間が0になった時点でcleartimeoutでタイマー処理を解除
- この一連の流れを1秒ごとに更新する
- 時間の単位はミリ秒 1秒=1000ms
- setInterval()ではなくsetTimeout()を使う
setIntervalとsetTimeoutの違い
setIntervalとsetTimeoutの違いについは、調べれば詳しい解説がたくさんありますが、簡単に言いますと
- setInterval → 処理が終わっていなくても指定の時間ごとに処理を実行する。止める時はclearInterval
- setTimeout → 一定時間経過後に処理を一回だけ実行する。処理を解除する時はclearTimeout
時計の様にリアルタイムで表示が変わっていくタイプのタイマーなら、setIntervalですが、処理が終わっていなくても次々に処理を進めるタイプのsetIntervalを使うとクラッシュの危険もあり、やはりsetTimeoutを使った方が安全だと言えましょう。
jQueryでhtmlファイルに出力する
jQueryでブラウザに表示するための記述についての説明です。
ここでは出力先のhtmlの要素にcountdownというidをつけています。
id countdownに、五輪まであと何日かをhtmlに出力せよという命令文を書きます。
この部分です。↓
$("#countdown").html("2020東京五輪まであと" + daysBetween + "日です!");
今回はhtmlメソッドとtextメソッドの両方を使ってみましたが、どちらを使っても出力されます。
もし表示させたい文の中で改行タグ<br>などhtmlタグを使いたい場合は、textメソッドではなくhtmlメソッドを使うのが良いです。
日時を変えて簡単なhtmlファイルを作ってみましたよ。
無事表示出来ました。
ソースの中の日時や、setInterval()とsetTimeout()を入れ替えて違いを確認してみて下さい。
setInterval()にすると、リアルタイムで時計の針が進みますよ。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指定の日時までカウントダウン</title>
<style type="text/css">
body {
background-color: #689D84;
}
#countdown{
width:22em;
margin: 2em;
color:#666;
font: 2em bold;
text-align: center;
padding: 2em;
background:#fcfaf5;
border-radius: 0.3em;
border-bottom: solid 0.12em #777;
border-right: solid 0.12em #777;
}
</style>
</head>
<body>
<div id="countdown">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function countdowntimer(){
var countdown = setTimeout(function(){
var today = new Date();//今の日時
var targetDay = new Date('2019/01/01 00:00:00');//ターゲットの日時
var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
var remainDay = (targetDay - today);//残り日時
if (remainDay >= 0){//もし残りの日時が0より多かったら、
var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h=3600000ms)
var h1 = h % 24;//hを24で割った余り
var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分=60000 ms)
var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒=1000ms)
$("#countdown").text("元旦まで"+ daysBetween + "日と" + h1 + "時間" + m + "分" +s + "秒です。");//htmlに出力
if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
clearTimeout(countdown);//ウントダウンを止める
$("#countdown").text("お正月です");//htmlに出力
}
}else{//指定の日時が過ぎてもテキストを表字させる用
$("#countdown").text("2019年1月1日 00:00:00を過ぎています。");
}
}, 1000);//処理を1秒後に予約
}
countdowntimer();
</script>
</body>
</html>
時間取得、1秒=1000msで計算するのがややこしかったですね〜
さて、次回はこれをワードプレスに実装してみますよ。
お楽しみに(^^)/