大晦日が近づくとなんとも言えない気分になりますよね。
JavaScriptで今日の日付を取得して今年の残り日数を表示するサイトを作りました。
今年の残り日数を取得する考え方
JavaScriptは、時刻を基本的にミリ秒として扱います。
ミリ秒に直した時刻同士は、引き算や足し算が可能です。
今回はこれを利用して、
を計算した後、
として残りの日数を求めて表示してみます。
現在日時をミリ秒に直す
現在日時は、Dateクラスのオブジェクトで取得できます。
var today = new Date();
このDateクラスのgetTimeメソッドを使うと現在時刻をミリ秒で取り出せます。
1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒で表した数値
と規定されています。
大晦日の日付をミリ秒に直す
Dateクラスのparseメソッドを使うと「2018/08/31」のような文字列をミリ秒に直すことが出来ます。
これを利用して、例えば今年が2018年であれば、
2018/12/31
という文字列を生成してからparseメソッドの引数に渡すことで大晦日の日付をミリ秒にします。
イメージ
Date.parse(“2018/12/31”);
実際は、以下のような感じで日付の文字列を生成して
// 大晦日の日付を文字列として作成 var today = new Date() ; var oomisoka = today.getFullYear() + "/12/31";
parseメソッドに日付の文字列を引数として渡せば、
Date.parse(oomisoka);
年月日をミリ秒に変換できます。
今年の残り日数をまずはミリ秒で計算する
ミリ秒同士は、引き算で差分を求めることが出来ます。
前述の大晦日のミリ秒と現在時刻のミリ秒同士は、
Date.parse(oomisoka) – today.getTime()
などとして差分を求めることが出来ます。
あとは求めた差分のミリ秒を日数に直す処理です。
ミリ秒を日数に直す処理
1日は、24時間
1時間は、60分
1分は、60秒
1秒は1000ミリ秒
ということですので、
で差分のミリ秒を割ってあげれば日数になります。
割り算をすることになるので、計算結果が割り切れるとは限りません。
日付を整数で表示するためには、Math.floorを使って整数に直す処理も必要となります。
以上を総合すると最終的にこのような式になります。
// 今年があと何日かを計算する var leftDays = Math.floor((Date.parse(oomisoka) - today.getTime() ) / (24*60*60*1000)) + 1;
式の最後で+1としているのは、12月31日を残り日数0とする為です。
ソースコード全体
サンプルのソースコード全体を以下に示します。
HTML部分
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>今年もあと何日</title> <meta name="viewport" content="width=device-width"> <script type="text/javascript" src="main.js"></script> </head> <body> <header> <h1 id="midashi">?</h1> </header> <div id="contents"> <p id="days">?</p> </div> <footer> <p><a target="_blank" href="https://dianxnao.com/">© 2018 dianxnao.com</a></p> </footer> </body> </html>
CSS部分
style.css
/* style.css */
/* 全体 */
*{
margin: 0;
padding: 0;
}
body, textarea{
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
background-color: #fff;
/*color: #546e7a;*/
}
/* ヘッダ */
header{
padding: 1em;
background-color: #fff;
color: #555;
border-bottom: solid 1px #ddd;
}
header h1{
text-align: center;
}
/* コンテンツ */
div#contents{
padding: 4em 2em;
font-size: 20pt;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
div#contents p{
line-height: 1.7em;
letter-spacing: .2em;
text-align: center;
}
/* フッタ */
footer{
padding: 1em;
font-size: 9pt;
background-color: #fff;
color: #ddd;
border-top: solid 1px #ddd;
text-align: center;
}
/* 残り日数部分 */
.leftDays{
font-size: 2.5em;
font-weight: 900;
color: dodgerblue;
}
/* リンクタグ */
a{
color: #ddd;
text-decoration: none;
}
/* メディアクエリ設定 */
@media only screen and (min-width:376px) and (max-width:960px) {
/* tablet用のcssを記述 */
header h1{
text-align: center;
font-size: 16pt;
}
div#contents{
width: auto;
margin: 10px 10px;
font-size: 15pt;
}
footer{
text-align: center;
}
}
@media screen and (max-width:375px) {
/* スマホ用のcssを記述 */
header h1{
text-align: center;
font-size: 14pt;
}
div#contents{
width: auto;
margin: 0 0;
font-size: 13pt;
}
footer{
text-align: center;
}
}
JavaScript部分
main.js
/* main.js */
window.onload = function(){
// 今日の日付を取得
var today = new Date() ;
var month = today.getMonth() + 1;
var date = today.getDate();
// 今日の日付を文字列として作成
var midashi = month + "月" + date + "日";
// 大晦日の日付を文字列として作成
var oomisoka = today.getFullYear() + "/12/31";
// 今年があと何日かを計算する
var leftDays = Math.floor((Date.parse(oomisoka) - today.getTime() ) / (24*60*60*1000)) + 1;
// 今日の日付を見出しに表示する
document.getElementById("midashi").innerHTML = midashi;
// 残り日数を表示する
if(leftDays === 0){
document.getElementById("days").innerHTML = "今年も今日で終わり。";
}
else{
document.getElementById("days").innerHTML = "今年もあと<span class='leftDays'>" + leftDays + "</span>日。";
}
}
以上、今日の日付を取得して今年の残り日数を表示するサイトでした。
コメント
[…] 今年の残り日数を表示する – 電脳産物 […]