JavaScript初心者の練習用サンプルを紹介します。
指定日からカウントダウンするタイマーのサンプルコードです。
JavaScriptでカウントダウンするタイマー
指定の年月日時間を入力し、指定時刻が現在時刻より未来であれば「指定の日時まで残り◯年◯月◯日23時51分29秒です。」と表示。
指定時刻が現在時刻より過去であれば「指定の日時まで残り◯年◯月◯日23時51分29秒です。」と表示。
するJavaScriptです。
ソースコード
ソースコードは以下のとおりです。
<html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Timer</title>
<script type="text/javascript">
function countTimer(){
var year= document.form1.year.value;
var month = document.form1.month.value;
var day= document.form1.day.value;
var hour= document.form1.hour.value;
var min= document.form1.min.value;
var first_txt = "指定の日時から";
var end_txt = "経過しています。";
var now = new Date().getTime()/1000;
//現在の日時。秒数
var set = new Date(year, month - 1, day, hour, min, 0).getTime() / 1000;
//設定の日時。秒数
var remain = Math.round(now - set);
if (remain <= 0) {
var first_txt = "指定の日時まで残り";
var end_txt = "です。";
remain = Math.round(set - now);
}
var result_year = Math.floor(remain / ( 60 * 60 * 24 * 365));
//Math.floor() で整数値にしている。
remain -= result_year * 60 * 60 * 24 * 365;
var result_month = Math.floor(remain/(60 * 60* 24 * 30));
remain -= result_month * 60 * 60 * 24 * 30;
var result_day = Math.floor(remain / (60 * 60 * 24));
remain -= result_day * 60 * 60 * 24;
var result_hour = Math.floor(remain / (60 * 60));
remain -= result_hour * 60 * 60;
var result_min = Math.floor(remain / 60);
remain -= result_min * 60;
var result_sec = Math.floor(remain);
document.getElementById("result").innerHTML = first_txt + result_year + "年" + result_month + "月" + result_day + "日" + result_hour + "時" + result_min + "分" + result_sec + "秒" + end_txt;
setTimeout("countTimer();", 1000);
}
</script>
</head>
<body>
<h1>Count down</h1>
<span id="result"> </span>
<form action="#" name="form1">
<input type="text" name="year" value="2003" size = "4" maxlength="4" >年<input type="text" name="month" value="2" size = "2" maxlength="2">月<input type="text" name="day" value="25" size = "2" maxlength="2">日<input type="text" name="hour" value="0" size = "2" maxlength="2">時<input type="text" name="min" value="0" size = "2" maxlength="2">分<input type="button" value="Show Result" onclick="countTimer();">
</form></body>
</html>Mathでのhourの計算での盲点
コーディング中、どうしても時間（hour）だけが5桁の時間としては大きすぎる数値になってしまい、何が原因だか分からずハマってしまいました。
発見してしまえば原因は、何でもないことで、「次の時間秒を時間Hに変換して整数値として丸める」の処理のところで、
var result_hour = Math.floor(remain / (60 * 60));
（）を忘れて
var result_hour = Math.floor(remain / 60 * 60);
という風になっていたのが原因でした。（）なしだと✕60になってしまいますものね。
こういう算数の部分が意外と盲点だったりするのですね。
まとめ
指定日からカウントダウンするタイマーというJavaScript初心者向け、練習用サンプルコードを紹介しました。
小中学生のころに「算数や数学を勉強する理由が分からなかった」という方も意外と多いですよね。
大人になってプログラミングを勉強するようになってはじめて、算数のセンスがプログラミングに活きるのだと気が付かされます。
PR プログラミング＆Webデザイン奮闘記
なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。スクールは物体のないサービスなので、その質はばらつきが激しいと痛感。受講してみたがオススメはできないスクールさんも正直ありました。（もちろんそちらのスクールさんへは本ブログからはリンクなどしておりません。）
通学型：仕事しながらなので土日の講座を受講しました。料金は高いですが、対面なので先生は気合い入れて教えてくださるし、なにより同士となる生徒さんとのコミュニケーションは通学型でしか手に入らないと思いました。仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。
オンライン型：生徒さんの都合や学びたい内容に応じてフルカスタマイズしてくれるスクールは非常に便利なのですが、「その費用内に含まれるサービスは何時間までで、教えてくれる範囲はどこまでなのか」を契約時に必ず確認したほうが良いです。
私は某スクールさんで、総時間数の取り決めが曖昧だったため終わってみたら“総授業時間短くない？！”という経験をしました。しかし、オンラインのスクールは良いスクールさんに出会えれば、通学型より費用も抑えられ自宅でも受講でき、効率は非常に良いです。
