アナログ時計

戻る

「今何日なのか、何時何分なのか、どうしても気になる！でもデジタル時計は性に合わん！やっぱりアナログ時計が一番なんじゃーッ!!」
という熱いこだわりを持つあなたのために、HTMLとCSSとJavascriptを使って現在日時をアナログ時計風に表示するページを勢いあまって作ってみました。

実行例

12 3 6 9

現在の日時がアナログ時計風にリアルタイムで表示されます。

ダウンロード

下の「analog_clock.html」と書かれた部分をクリックすると、このアナログ時計をダウンロードできます。

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

analog_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">
<!-- お気に入りアイコンを描画 -->
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAgICAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQABAAAAAAEAAAABAAAAEAAAAAAQAAAAAAAAAAAAAQAAAAAAAQAAAAAAAAAAAAAAAAIiIgAAAAAAAgAAAAABAAACAAABAAAAAAIAAAAAABAAAgAAEAAAAQACAAEAAAAAAQABAAAAAAAAAAAAAAD//wAA+D8AAOKPAADGxwAAnvMAAJ/zAAA/+QAAf/0AAA4BAAB+/QAAPvkAAJ7zAACe8wAAxscAAOKPAAD4PwAA" rel="shortcut icon" type="image/x-icon" />
<title>アナログ時計</title>
<style>
* { box-sizing: border-box; }
/* ページ全体を調整 */
/* もしこのアナログ時計を自分のページで使いたいなら、このbodyに関する設定は不要かも */
body {
  max-width:500px;
  margin: 8px auto;
  text-align:center;
  font-family: 'ヒラギノ角ゴ ProN', Arial, 'メイリオ',Meiryo,sans-serif;
 
}
/* 時計のデザイン */
/* CSSで強引にアナログ時計を描くッ!! */
.c-clock { /* 時計の外枠 */
  position: relative;
  width: 400px;           /* 直径400ピクセル */
  height: 400px;
  margin: 0 auto;
  border: 6px solid #555;
  border-radius: 50%;     /* 角を丸めて円形にする */
  background-color:ivory;
  /* box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.1) inset; */
}
.c-clock__60 { /* 秒目盛 */
  /* さすがに毎秒の目盛りを一つ一つ描くのはアレなので、
     円に対してグラデーションをかける技術の応用で、
     点線状のグラデーションを作って秒針を表現しています。力技…… */
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background-image: radial-gradient(ivory 0% 68%, transparent 68% 100%),repeating-conic-gradient(gray 0% 0.1%, transparent 0.1% 1.6666%) ;
  transform: rotate(-0.3deg);
}
 
.c-clock__hour { /* 時針 */
  position: absolute;
  top: calc(50% - 120px);
  left: calc(50% - 5px);
  width: 10px;
  height: 120px;
  background: #333;
  transform-origin: bottom;
  z-index: 10;
}
 
.c-clock__min { /* 分針 */
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 2px);
  width: 4px;
  height: 180px;
  background: #333;
  transform-origin: bottom;
  z-index: 8;
}
.c-clock__sec { /* 秒針 */
  position: absolute;
  top: calc(50% - 185px);
  left: calc(50% - 1px);
  width: 2px;
  height: 185px;
  background: #ff0000;
  transform-origin: bottom;
  z-index: 6;
}
.animate { transition: 0.1s; }
.c-clock__12,
.c-clock__3,
.c-clock__6,
.c-clock__9
{
  position: absolute;
  font-size: 28px;
  font-weight:bold;
  /* text-shadow: 4px 4px 5px rgba(0,0,0,0.2); */
}
/* 12,3,6,9時の表示 */
.c-clock__12 {
  top: 20px;
  left: calc(50%);
  transform: translateX(-50%);
}
.c-clock__3 {
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}
.c-clock__6 {
  bottom: 20px;
  left: calc(50%);
  transform: translateX(-50%);
}
.c-clock__9 {
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
}
.c-clock__1,
.c-clock__2,
.c-clock__4,
.c-clock__5,
.c-clock__7,
.c-clock__8,
.c-clock__10,
.c-clock__11
{
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 2px);
  width: 4px;
  height: 180px;
  border-top: solid 10px #333;
  transform-origin: bottom;
}
/* 回転させることで1,2,4,5,7,8,10,11時の目盛りを描く力技!! */
.c-clock__1 { transform: rotate(30deg); }
.c-clock__2 { transform: rotate(60deg); }
.c-clock__4 { transform: rotate(120deg); }
.c-clock__5 { transform: rotate(150deg); }
.c-clock__7 { transform: rotate(210deg); }
.c-clock__8 { transform: rotate(240deg); }
.c-clock__10 { transform: rotate(300deg); }
.c-clock__11 { transform: rotate(330deg); }
 
/* 日付表示用 デジタルパネル */
/* アナログ時計でも今日の日付が知りたいんです */
.digit{
  position: absolute;
  top: calc(50% + 60px);
  left: calc(50% - 60px);
  width:120px;
  background-color: #889f68;
  color:#333;
  border-radius: 4px;
  padding: 0 8px;
  text-align: center;
  font-size: 20px;
  font-family: Consolas, Osaka, monospace;
  font-weight:bold;
  box-shadow: 4px 4px 5px rgba(0,0,0,0.2) inset;
}
/* 曜日の表示 */
.week { font-size: 9pt; }
 
/* フッター（主に閉じる・戻るボタン） */
.footer { text-align:right; }
.footer a {
  text-decoration: none;
  border: solid 2px gray;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  font-size:14px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  cursor:pointer;
  /* background: linear-gradient( to bottom, #ccc,#999 ); */
  /* box-shadow: -1px -1px 0px #444 inset; */
  /* box-shadow: 1px 1px 0px white inset; */
}
.footer a:link { color:#333; }
.footer a:visited { color:#333; }
.footer a:hover { opacity:0.8; }
</style>
</head>
 
<body>
<!-- 本文ここから -->
<h1>アナログ時計</h1>
 
<!-- 時計本体 -->
<div class="c-clock" id="c-clock"> <!-- 外枠 -->
  <div class="c-clock__60"></div> <!-- 秒目盛 -->
  <span class="c-clock__hour"></span> <!-- 時針 -->
  <span class="c-clock__min"></span> <!-- 分針 -->
  <span class="c-clock__sec"></span> <!-- 秒針 -->
  <span class="c-clock__12">12</span> <!-- 時計文字 -->
  <span class="c-clock__3">3</span> <!-- 時計文字 -->
  <span class="c-clock__6">6</span> <!-- 時計文字 -->
  <span class="c-clock__9">9</span> <!-- 時計文字 -->
  <span class="c-clock__1"></span>  <!-- 5分間隔目盛 -->
  <span class="c-clock__2"></span>
  <span class="c-clock__4"></span>
  <span class="c-clock__5"></span>
  <span class="c-clock__7"></span>
  <span class="c-clock__8"></span>
  <span class="c-clock__10"></span>
  <span class="c-clock__11"></span>
  <div class="digit"></div>
</div>
 
<script>
// バックリンクを描画
drawBacklink();
 
// 時計処理用タイマー
setInterval(() => {
  // 現在時間の取得
  const now = new Date();
  const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();
  const M = now.getMonth() + 1;
  const d = now.getDate();
  const w = now.getDay();
 
  // 時、分、秒を元に角度を計算
  const degH = h * (360 / 12) + m * (360 / 12 / 60);
  const degM = m * (360 / 60);
  const degS = s * (360 / 60);
 
  // 各要素を取得
  const elementH = document.querySelector(".c-clock__hour");
  const elementM = document.querySelector(".c-clock__min");
  const elementS = document.querySelector(".c-clock__sec");
 
  // styleを追加
  elementH.style.transform = `rotate(${degH}deg)`;
  elementM.style.transform = `rotate(${degM}deg)`;
  elementS.style.transform = `rotate(${degS}deg)`;
  const week = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][w];
 
  // 日付のデジタル表示部分を描画
  const mes = make2digit(M) + "/" + make2digit(d) + " <span class='week'>" + week + "</span>";
  document.querySelector(".digit").innerHTML = mes;
}, 100);
 
// 一桁の数字を0で埋めて2桁にする。
function make2digit(num) {
  return ((num < 10) ? "0" + num : num);
 
}
 
// バックリンクを作る
function drawBacklink(){
 var newElement = document.createElement("p");
 newElement.setAttribute("class","footer");
 var aElement = document.createElement("a");
 // history があれば 戻る リンクを、無ければ 閉じる リンクを作る。
 if( window.history.length > 1){
  aElement.setAttribute("href","javascript:history.back();");
  aElement.appendChild(document.createTextNode("戻る"));
 } else {
  aElement.setAttribute("href","javascript:window.close();");
  aElement.appendChild(document.createTextNode("閉じる"));
 }
 newElement.appendChild(aElement);
 // body の最後の子要素として、リンクを追加。
 document.getElementsByTagName("body")[0].appendChild(newElement);
}
</script>
 
</body>
</html>

戻る

コンピュータ基礎実習

目次

アナログ時計

実行例

ダウンロード

コンピュータ基礎実習

ユーザ用ツール

サイト用ツール

目次

アナログ時計

実行例

ダウンロード

ページ用ツール