JavaScriptでの時計作成

投稿日：2016年3月23日更新日：2020年5月17日

今回はWebアプリで１秒ごとに更新されるデジタル時計の作成方法について。

基本的には

現在時刻を秒まで含めて表示
その関数を一秒ごとに更新

でOKです。

ネットにどんぴしゃりのサンプルが落ちていたのでコピペします。現在時刻を表示し、１秒ごとに更新する処理も同時に書いてしまいます。

function clock() {
var myDay = new Array("日","月","火","水","木","金","土");
var now  = new Date();
var year = now.getFullYear(); // 年
var month = now.getMonth()+1; // 月
var date = now.getDate(); // 日
var day = now.getDay();
var hour = now.getHours(); // 時
var min  = now.getMinutes(); // 分
var sec  = now.getSeconds(); // 秒

// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

// フォーマット①
var clock1 = hour + ':' + min + ':' + sec;

document . getElementById( 'clock-01' ) . innerHTML= clock1 . toLocaleString(); // div id="clock-01"

// フォーマット②
var clock2 = year + '年' + month + '月' + date + '日' + '（' + myDay[day] + '曜日）'  + hour + '時' + min + '分' + sec + '秒';

document . getElementById( 'clock-02' ) . innerHTML= clock2 . toLocaleString(); // div id="clock-02"

// 1000ミリ秒ごとに処理を実効
window . setTimeout( "clock()", 1000);
}
window . onload = clock;
</script>

function clock() {

var myDay = new Array("日","月","火","水","木","金","土");

var now = new Date();

var year = now.getFullYear(); // 年

var month = now.getMonth()+1; // 月

var date = now.getDate(); // 日

var day = now.getDay();

var hour = now.getHours(); // 時

var min = now.getMinutes(); // 分

var sec = now.getSeconds(); // 秒

// 数値が1桁の場合、頭に0を付けて2桁で表示する指定

if(hour < 10) { hour = "0" + hour; }

if(min < 10) { min = "0" + min; }

if(sec < 10) { sec = "0" + sec; }

// フォーマット①

var clock1 = hour + ':' + min + ':' + sec;

document . getElementById( 'clock-01' ) . innerHTML= clock1 . toLocaleString(); // div id="clock-01"

// フォーマット②

var clock2 = year + '年' + month + '月' + date + '日' + '（' + myDay[day] + '曜日）' + hour + '時' + min + '分' + sec + '秒';

document . getElementById( 'clock-02' ) . innerHTML= clock2 . toLocaleString(); // div id="clock-02"

// 1000ミリ秒ごとに処理を実効

window . setTimeout( "clock()", 1000);

}

window . onload = clock;

</script>

まあJavaScriptはいろいろとライブラリが不足しており、現在時刻をとるとかもすぐにはできず、通常だと上記のような処理が必要になります。

ところが以前紹介したsugar.jsというライブラリを読み込ませれば日付の表記が非常に簡単になるので以下のような書き方でOKです。

window.onload = clock;

function clock(){
    var nowFormated = Date.create().format('{yyyy}年{MM}月{dd}日 {HH}時{mm}分{ss}秒');
    document.getElementById('clock-02').innerHTML = nowFormated;
    // 1秒(1000ミリ)ごとに処理を実効
    window . setTimeout( "clock()", 1000);
}

window.onload = clock;

function clock(){

var nowFormated = Date.create().format('{yyyy}年{MM}月{dd}日 {HH}時{mm}分{ss}秒');

document.getElementById('clock-02').innerHTML = nowFormated;

// 1秒(1000ミリ)ごとに処理を実効

window . setTimeout( "clock()", 1000);

}

このライブラリかなり使ってましていろんなところで役立ちますので大変おすすめです。