JavaScriptを使ってウェブサイトにデジタル時計を表示する方法を紹介します。

まずはhtmlの<head>〜</head>内に以下のスクリプトを記述します。

<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>

続いて<body>〜</body>タグ内の好きな場所に、以下のコードを記述します。

<div id="clock-01"></div>
<!-- または -->
<div id="clock-02"></div>

基本的には以上でＯＫ。

JavaScriptのコード内で、２種類の表示用フォーマットを定義しています。
１つあれば、もう一方は余分なので削除しても大丈夫。
対応するのは以下の部分です。

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

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

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

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

［フォーマット①］か［フォーマット②］のお好きなほうをカスタマイズしてください。

以下、上記コードを実装したサンプルになります。

JavaScript デジタル時計：サンプルデモ