デジタル時計

戻る

「今何日なのか、何時何分なのか、どうしても気になる！しかもホームページ上に現在日時をデジタル時計風で表示したいんだーッ!!」
というあなたのために、HTMLとCSSとJavascriptを使って現在日時を表示するページを作ってみました。

実行例

ここに時計が表示されます。

現在の時刻がデジタル時計風にリアルタイムで表示されます。

ダウンロード

下の「digital_clock.html」と書かれた部分をクリックすると、このデジタル時計をダウンロードできます。

ダウンロードした「digital_clock.html」をダブルクリックで実行すると、時計が表示できます。
サーバーは不要です。ダブルクリックするだけでパソコン上で動作できます。
自由に使ったり改造したりしてＯＫです。😁

digital_clock.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>時計</title>
<style>
/* 時計部分のデザイン */
#clock{
  background-color:black; /* 背景色 */
  color:#8f0;             /* 文字色 */
  display:inline-block;
  padding:0.5em;
  font-size: larger;
  font-family: Consolas , Osaka, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN" , monospace;
  vertical-align: baseline;
  border-radius: 4px;     /* 角を丸くする */
}
</style>
</head>
 
<!-- 本文ここから -->
<body onLoad="drawClock();drawBacklink();"> <!-- ページのロードが完了したらJavascriptを実行 -->
 
<h1>時計</h1>
 
<p>リアルタイムクロック</p>
 
<div id="clock">ここに時計が表示されます。</div>
 
<div id="backlink"><p><a href="javascript:window.close();">閉じる</a></p></div>
 
<script>
// 「clock」というidを持つ要素をに対するエレメントをtgt変数に格納
// 要するに id="clock" と書いた要素をターゲットに定める。
var tgt = document.getElementById('clock');
 
// 時計描画関数
function drawClock(){
  var nowTime = new Date();                // 現在の日時を取得
  var nowYear = nowTime.getFullYear();     // 年月日時分秒をそれぞれ抽出
  var nowMonth = nowTime.getMonth() + 1;
  var nowDate = nowTime.getDate();
  var w = nowTime.getDay();                // 曜日（数値 0:日曜 1:月曜...）
  var dayOfWeek = ["日","月","火","水","木","金","土"][w]; // 曜日は漢字表記にする
  var nowHour = set2dec(nowTime.getHours());
  var nowMin = set2dec(nowTime.getMinutes());
  var nowSec = set2dec(nowTime.getSeconds());
  // 全部まとめて１つの文字列にする
  var msg = nowYear + "/" + nowMonth + "/" + nowDate + "(" + dayOfWeek + ") " + nowHour + ":" + nowMin + ":" + nowSec;
  tgt.innerHTML = msg;            // 「clock」要素の中身を改変
  setTimeout('drawClock()',500);  // 500ミリ秒ごとに画面を更新するタイマーを仕掛ける
}
 
// 桁数が1桁の場合は先頭に0を加えて2桁にする。デジタル時計っぽく。
function set2dec(num) {
  let ret;
  if (num < 10){ ret = "0" + num; } else { ret = num; } // 10未満の数値には先頭に0をつける。
  return ret;
 
}
 
// バックリンクを作る（おまけ）
// id="backlink" を持つ要素に、
// 戻り先がある場合は 戻る を、ない場合は 閉じる リンクを描画する。
function drawBacklink() {
 const backTxt = "<p><a href=\"javascript:history.back();\">戻る</a></p>";
 const closeTxt = "<p><a href=\"javascript:window.close();\">閉じる</a></p>";
 const tgtElement = document.getElementById('backlink');
 if( window.history.length > 1){
  tgtElement.innerHTML = backTxt;
 } else {
  tgtElement.innerHTML = closeTxt;
 }
}
</script>
 
 
</body>
<!-- 本文ここまで -->
</html>

戻る

コンピュータ基礎実習

目次

デジタル時計

実行例

ダウンロード

コンピュータ基礎実習

ユーザ用ツール

サイト用ツール

目次

デジタル時計

実行例

ダウンロード

ページ用ツール