jQueryで日時を表示する
WordPressなどのCMSで投稿した際に、記事の更新日が記載されています。
これをjQueryで日時表示するにはどう記述したらいいのか解説します。
実を言うと、意外と簡単です。
カスタマイズも簡単ですので、デザインカンプからの実装で付加価値として「こんなこともできますよ」と添えるのもアリです。
jQueryで日時を表示する
早速、コードを表示します。
表示したい箇所にdivタグをいれ、idを挿入します。
例として、idを「date」としました。
<div id="date"></div>次に基礎となるjQueryです。
$(function(){
$('#date').text(new Date());
});これだけで、下記の画像のように日本時間で表示されます。
現在の日時をリアルタイムで表示する
現在の日時をリアルタイムで表示するには setInterval(); を追加します。
$(function(){
setInterval(function(){
$('#date').text(new Date());
}, 1000);
});動いていますね～
setInterval(function(){}, 1000); は1000ミリ秒毎に特定の処理を繰り返す記述です。
変数を使って現在日時を表示する
new Date()を使って現在日時を必要な部分だけ抜き出して表示します。
実装するには、変数の new Data() を使います。
その中に var nowという名前の箱を作ってそれに入れてあちこちで使いまわします。
$(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
$('#date').text(y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')');
});wという箱には曜日が入るのですが、ここには実際に曜日が入っているわけではなく0から6の数字(0：日曜日、1：月曜日～)が入っており、その数字を曜日に割り当てるための箱、wdという箱を作り、曜日が自動的に繰り返して表示される仕組み(配列)を作って曜日を表示させています。
.text()の中で変数や文字列を文字列として繋ぐのに「+」の記号(演算子)を使って繋いでいきます。
桁数を揃える
表示された数字を見ていただければわかると思いますが、一桁だったり二桁だったりしています(年号を除いて)
それを01とか02というようにサンプル1・サンプル2のように二桁に統一したい場合は次のようにします。
$(function(){
setInterval(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
var mm = ('0' + m).slice(-2);
var dd = ('0' + d).slice(-2);
var hh = ('0' + h).slice(-2);
var mmi = ('0' + mi).slice(-2);
var ss = ('0' + s).slice(-2);
$('#date').text(y + '年' + mm + '月' + dd + '日' + hh + '時' + mmi + '分' + ss + '秒' + '(' + wd[w] + ')');
}, 1000);
});mmやddのように二つ並べるだけです。
これで１秒 ➾ ０１秒になりましたね。
必要な情報だけ表示する
必要な情報だけ表示するには、$(‘#date’).text(y + ‘年’ + mm + ‘月’ + dd + ‘日’ + hh + ‘時’ + mmi + ‘分’ + ss + ‘秒’ + ‘(‘ + wd[w] + ‘)’); 内を削除します。
それぞれの意味は y=年、m=月、d=日、h=時、mi=分、s=秒、wd=曜日 です。
例として、年月日のみにしてます。
$(function(){
setInterval(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
var mm = ('0' + m).slice(-2);
var dd = ('0' + d).slice(-2);
var hh = ('0' + h).slice(-2);
var mmi = ('0' + mi).slice(-2);
var ss = ('0' + s).slice(-2);
$('#date').text(y + '年' + mm + '月' + dd + '日');
}, 1000);
});漢字をスラッシュ「／」にします。
$(function(){
setInterval(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
var mm = ('0' + m).slice(-2);
var dd = ('0' + d).slice(-2);
var hh = ('0' + h).slice(-2);
var mmi = ('0' + mi).slice(-2);
var ss = ('0' + s).slice(-2);
$('#date').text(y + '/' + mm + '/' + dd + '日');
}, 1000);
});まとめ
これで時間表示を記述することが可能となりました。
また、カスタマイズも可能ですね。
デザインとしてどこに配置するのかがは適時判断してください。