JavaScript時計のページ

このページでは、他者のサイト・ブログ等で得た情報を参考に、
JavaScript(ジャバスクリプト)を用いて独自に時計を製作したものを
ソースとともに公開しています。

時計をご自身のサイト等に表示したい方は、
当該時計ごとにソースコードが記載されたテキストエリアをクリックし、
反転表示されたソースコードをコピーして、HTMLファイルの所定の箇所に貼り付けてください。
貼り付ける場所は、各ソースコードの手前に表示されています。

もし、うまく表示されない場合は、
当該時計のソースコード付近にある注意書きをよくお読みの上、
変更可能な部分(ファイル名など)を別の名前に変更してみてください。

なお、改造はご自由にどうぞ。報告・連絡は不要です。
このページに掲載されている各種時計のソースコードは、
全てHTMLファイルに直接記述するだけで作動するタイプのものであり、
CSSやJSファイル、外部プラグインなどを別途用意する必要はありません。

当ページをご覧いただくには、ブラウザの設定でJavaScriptを有効にしてください。

［インデックス］

テキスト時計
デジタル時計
アナログ時計
(謝辞)

［テキスト時計］

テキストタイプの時計。画像は一切使用しません。

テキストをデジタル時計のようにリアルタイムに表示するものなので、
文字の色やフォント、大きさなどはHTMLやCSSなどのタグで自由に設定・変更できます。

お好みにより、時刻だけでなく年月日の日付と曜日を入れることも可能です。

［ソース］ (<body>～</body>の間の好きなところに貼り付ける)

<p id="Clock1" style="display: inline"></p>
<script type="text/javascript">
setInterval('showClock1()',1000);
function showClock1() {
var DWs = new Array('(日)','(月)','(火)','(水)','(木)','(金)','(土)');
var Now = new Date();
var YY = Now.getYear();
if (YY < 2000) { YY += 1900; }
var MM = set0( Now.getMonth() + 1 );
var DD = set0( Now.getDate() );
var DW = DWs[ Now.getDay() ];
var hh = set0( Now.getHours() );
var mm = set0( Now.getMinutes() );
var ss = set0( Now.getSeconds() );
var RTime1 = ' ' + YY + '年' + MM + '月' + DD + '日 ' + DW + ' ' + hh + '時' + mm + '分' + ss + '秒';
document.getElementById("Clock1").innerHTML = RTime1;
}
function set0(num) {
var ret;
if( num < 10 ) { ret = "0" + num; }
else { ret = num; }
return ret;
}
</script>

［注意点］

うまく表示できない場合は、データ名「Clock1」の部分を
「Clock2」など、全て別の同一の名前に変えてみてください。

［表示例１］

［表示例２］

［デジタル時計］

デジタル数字で現在の時刻を表示する時計。
数字と、時分・分秒の間に設ける「：」(コロン)に、画像を使用します。
画像は各自でご用意ください。

お好みで、デジタル時計の上か下に日付を付けることもできます。

下記のソースはすべて必須なので注意。

［ソース１］ (時計の設定部分。<head>～</head>の間に設置する)

<style type="text/css">
#clock{
  padding : 0px 0px;
  position : relative;
  left : 0;
  top : 0px;
  width : 320px;
  height : 100px;
}
#digits{
  margin : 0 auto;
  padding : 0;
  position : absolute;
  width : 320px;
  height : 70px;
}
#weekdays{
  margin : 0 auto;
  padding : 0;
  position : absolute;
  bottom : 10px;
  width : 300px;
  height : 20px;
  line-height : 20px;
  text-align : center;
  font-size : 16px;
  color : #666666;
  font-family : Meiryo;
}
</style>

［ソース２］ (時計の表示部分。<body>～</body>の間の好きなところに貼り付ける)

<div id="clock">
<div id="digits"></div>
<div id="weekdays"></div>
</div>

<script type="text/javascript">

( function(){ //IIFE start
// Output of the elements.
document.addEventListener('DOMContentLoaded',outputClock,false);
function outputClock(){
  var img_src;
  const DIG_OBJ = document.getElementById('digits');
  for( var i=0; i<8; i++ ){
    const ADD_DIV = document.createElement('span');
    ADD_DIV.setAttribute('id','Nums'+i);
    DIG_OBJ.appendChild(ADD_DIV);
    if( i==2 || i==5 ){ img_src = '../graphic/digiwatch_colon.png'; }
    else{ img_src = '../graphic/digiwatch_0.png'; }
    ADD_DIV.innerHTML = '<img id="dig'+i+'" src="'+img_src+'">';
  }
  moveDigital();
}

// Move the numbers.
function moveDigital(){
  var now   = new Date();
  var hour   = now.getHours();
  var hour2  = hour % 10;
  var hour1  = (hour-hour2) / 10 ;
  var mine   = now.getMinutes();
  var mine2  = mine % 10;
  var mine1  = (mine - mine2) / 10; 
  var sec    = now.getSeconds();
  var sec2   = sec % 10;
  var sec1   = (sec - sec2) / 10;
  document.getElementById('dig0').src = '../graphic/digiwatch_'+hour1+'.png';
  document.getElementById('dig1').src = '../graphic/digiwatch_'+hour2+'.png';
  document.getElementById('dig3').src = '../graphic/digiwatch_'+mine1+'.png';
  document.getElementById('dig4').src = '../graphic/digiwatch_'+mine2+'.png';
  document.getElementById('dig6').src = '../graphic/digiwatch_'+sec1+'.png';
  document.getElementById('dig7').src = '../graphic/digiwatch_'+sec2+'.png';
  DispWeekDays();
}

setInterval( moveDigital,500 );

// -----------------------------------------------------------------
// 日付も表示する場合(テキスト形式)
// -----------------------------------------------------------------
function DispWeekDays(){
  const monthEn = new Array(12);
  monthEn[0]  = 'January';
  monthEn[1]  = 'February';
  monthEn[2]  = 'March';
  monthEn[3]  = 'April';
  monthEn[4]  = 'May';
  monthEn[5]  = 'June';
  monthEn[6]  = 'July';
  monthEn[7]  = 'August';
  monthEn[8]  = 'September';
  monthEn[9]  = 'October';
  monthEn[10] = 'November';
  monthEn[11] = 'December';
  const WeekEn = new Array(7);
  WeekEn[0] = 'Sunday';
  WeekEn[1] = 'Monday';
  WeekEn[2] = 'Tuesday';
  WeekEn[3] = 'Wednesday';
  WeekEn[4] = 'Thursday';
  WeekEn[5] = 'Friday';
  WeekEn[6] = 'Saturday';
  const WeekJn = new Array('日','月','火','水','木','金','土');

  // Display of date.
  var today  = new Date();
  var Year = today.getFullYear();      //year
  var Mon = monthEn[today.getMonth()]; //month
  var Day = today.getDate();           //date
  var Week = WeekEn[today.getDay()];   //day of the week
  var nowdate = Year+' '+Mon+'-'+Day+' '+Week;
  //日本語表記の場合は、追加で下記2行も使用する
  var nowdate = Year+'年 ' +(today.getMonth()+1)+'月 '
  +Day+'日 ('+WeekJn[today.getDay()]+')';

  document.getElementById('weekdays').innerHTML = nowdate;
}
}() ); //IIFE end
</script>

［注意点］

使用する数字の画像の大きさは、横40x縦60くらいを推奨します。
(※今回のサンプルでは、44x67平均の大きさの数字画像を使用しました。)

［ソース１］の各種設定(文字色、フォント、幅・高さなど)は、各自のお好みで変更可能ですが、
表示する数字の画像の大きさによっては空白スペースが変に大きくなったり、
2行以上にまたがって表示されてしまうことがあります。

［ソース２］については、
日付表示を英語表記にする場合は

// Display of date.

以下

var nowdate = Year+' '+Mon+'-'+Day+' '+Week;

まで。

日本語表記にする場合は、空白行を作らずに追加で

var nowdate = Year+'年 ' +(today.getMonth()+1)+'月 '

以下

+Day+'日 ('+WeekJn[today.getDay()]+')';

までを貼り付けてください。

日付表記が不要である場合は、

function DispWeekDays(){

以下

+Day+'日 ('+WeekJn[today.getDay()]+')';

までの部分は省略してください。

［表示例］

上記のサンプルでは便宜上、使用している画像のファイル名は
数字の部分は数字番号に合わせて「digiwatch_0」～「digiwatch_9」
時分と分秒の間に表示されるコロンの画像は「digiwatch_colon」としています。
また、画像ファイルを格納するフォルダ名を「graphic」としています。

ご使用の際、フォルダ名は必要に応じて各自で自由に変更できます。
ただし、数字およびコロンの画像名については、
「digiwatch_」の部分は自由に変更できますが、
「0」から「9」、および「colon」は変更しないこと、また、それらの後に何も記入しないこと。
(例：「number0」はOKだが、「number00」や「number0suuji」など、後ろに何か名前を付けるのはNG。)
以上のことをお守りいただきますようお願いします。

もしわからない場合は、使用する画像のファイル名は「digiwatch_0」などをそのままご使用ください。

上記サンプルでは、下記の11個の画像を使用しています。
色変更などの加工をしやすくするため、黒色ではなく明るめの有彩色を使用しました。
画像は数字やコロンごとに別々になっています。
よろしければお持ち帰りくださいませ。

［アナログ時計］

長針、短針、秒針の3つの針で現在の時刻を表示するアナログ時計。
画像には、3本の針(長針・短針・秒針)、回転軸、文字盤、の合わせて5つを使用します。
画像は各自でご用意ください。

下記のソースはすべて必須なので注意。

［ソース１］ (時計の設定部分。<head>～</head>の間に設置する)

<style type="text/css">
#aclocks {
	display: block;
	width: 250px;
	height: 250px;
}
.aclock {
	position: absolute;
}
</style>

［ソース２］ (時計の表示部分。<body>～</body>の間の好きなところに貼り付ける)

<div id="aclocks">
<img src="../graphic/anaclock_body.png" width="250" height="250" id="image_body" class="aclock">
<img src="../graphic/anaclock_short.png" width="250" height="250" id="image_short" class="aclock">
<img src="../graphic/anaclock_long.png" width="250" height="250" id="image_long" class="aclock">
<img src="../graphic/anaclock_sec.png" width="250" height="250" id="image_sec" class="aclock">
<img src="../graphic/anaclock_cover.png" width="250" height="250" id="image_cover" class="aclock">
</div>

<script type="text/javascript">
window.onload = function() {
//タイマー起動
timerID = setInterval("moveTimer()",1000);
};
//時計を動かす
function moveTimer() {
var date,Hou,Min,Sec,hDeg,mDeg,sDeg;
//日付
date = new Date();
//時間取得
Hou = date.getHours();
Min = date.getMinutes();
Sec = date.getSeconds();
//針の角度取得
hDeg = (Hou % 12) * (360 / 12);
mDeg = Min * (360 / 60);
sDeg = Sec * (360 / 60);
//角度調整
hDeg += (Min / 60) * (360 / 12);
mDeg += (Sec / 60) * (360 / 60);

//短針の表示
document.getElementById("image_short").style.transform = "rotate(" + hDeg + "deg)";
document.getElementById("image_short").style.MozTransform = "rotate(" + hDeg + "deg)";
document.getElementById("image_short").style.WebkitTransform = "rotate(" + hDeg + "deg)";
document.getElementById("image_short").style.msTransform = "rotate(" + hDeg + "deg)";

//長針の表示
document.getElementById("image_long").style.transform = "rotate(" + mDeg + "deg)";
document.getElementById("image_long").style.MozTransform = "rotate(" + mDeg + "deg)";
document.getElementById("image_long").style.WebkitTransform = "rotate(" + mDeg + "deg)";
document.getElementById("image_long").style.msTransform = "rotate(" + mDeg + "deg)";

//秒針の表示
document.getElementById("image_sec").style.transform = "rotate(" + sDeg + "deg)";
document.getElementById("image_sec").style.MozTransform = "rotate(" + sDeg + "deg)";
document.getElementById("image_sec").style.WebkitTransform = "rotate(" + sDeg + "deg)";
document.getElementById("image_sec").style.msTransform = "rotate(" + sDeg + "deg)";
}
</script>

［注意点］

ソースは［１］［２］とも基本的に変更する必要はありません。
ただし、使用する画像は、5つとも同じ大きさの正方形にしてください。

上記のサンプルでは、使用した画像の大きさが250x250であるため、
2つのソースの画像サイズ表示指定要素である「width」と「height」をともに「250」にしましたが、
それ以外のサイズの画像を使用する場合は
その部分をすべて画像の縦横一辺の大きさと同じ値に変更してください。

［表示例］

上記のサンプルでは便宜上、画像ファイルを格納するフォルダ名を「graphic」としています。

ご使用の際、必要に応じてフォルダ名を変更できます。
ただし、画像のファイル名は変更しないでください。
時計が正しく表示されなくなる可能性があります。

以上のことをお守りいただきますようお願いします。

上記サンプルでは、下記の5つの画像を使用しています。
よろしければお持ち帰りくださいませ。

なお、文字盤の画像は正方形に変えることもできます。
お好みに応じて各自でご用意くださいませ。

長針(分)	短針(時)	秒針

文字盤	回転軸

謝辞

下記のサイトの皆様、おかげでJavaScriptについて少し勉強することができ、
ソースコードをお借りして各種の時計を製作することができました。
この場を借りて感謝御礼申し上げます。

【JavaScript】デジタル時計を表示する方法。
サンプルJavaScript－デジタル時計（画像）
アナログ時計のソースと解説