アナログ時計【javascript】

N

画像1

こんな感じのアナログ時計が出来ます

html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>JavaScript clock</title>
 <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>


 <canvas id="canvas" width="300" height="300"></canvas>
 <!--<p id="time"></p>-->

 <div id="clock_frame">
   <span id="clock_date"></div>
   <span id="clock_time"></div>
 </div>

 <script src="main.js"></script>
</body>
</html>

js

//広域変数宣言
var ctx, h, m, s, width, height;

//オブジェクトID取得
function getOjg(id) {
 return  document.getElementById(id);
}

//canvas取得とsetIntervalで時刻取得関数へ値渡し------------------------
function clock(){
 //var canvas = document.getElementById("canvas");
 //if(canvas.getContext){
 ctx = getOjg("canvas").getContext("2d");
 //tick();
 setInterval(tick, 1000);
}

//時刻取得----------------------------------------------------
 function tick() {
   var now = new Date();
   h = now.getHours() % 12;
   m = now.getMinutes();
   s = now.getSeconds();

//日付と曜日の取得
   var weeks =  new Array("Sun","Mon","Thu","Wed","Thr","Fri","Sat");
   var y = now.getFullYear();
   var mo = now.getMonth() + 1;
   var d = now.getDate();
   var w = weeks[now.getDay()];

   if (mo < 10) mo = "0" + mo;
   if (d < 10) d = "0" + d;

 //getOjg("time").textContent = now.toLocaleTimeString();
   getOjg("clock_date").textContent = y + "/" + mo + "/" + d + " (" + w + ")";
   getOjg("clock_time").textContent = now.toLocaleTimeString();
   paint();

 }//tick

//秒針描画用関数------------------------------------------------
 function drawHand(rotation, length, width, color){
   ctx.save();//stylesave
   ctx.lineWidth = width;
   ctx.strokeStyle = color;
   ctx.rotate(rotation);
   ctx.beginPath();
   ctx.moveTo(0, 0);
   ctx.lineTo(0, -length);
   ctx.stroke();
   ctx.restore();//styleclear
 }//drawHand

//文字盤描画用関数----------------------------------------------
 function paint() {
   width = canvas.width;
   height = canvas.height;
   ctx.clearRect(0, 0, width, height);//display初期化

   ctx.save();//stylesave
   ctx.strokeStyle = "black";
   ctx.lineCap = "round";

//丸枠
   ctx.beginPath();
   ctx.arc(150, 150, 140, 0, 2 * Math.PI);
   ctx.stroke();

//目盛
   ctx.translate(150, 150);
   var pitch = Math.PI * 2 / 60;
   for(var i = 0; i < 60; i++){
     ctx.beginPath();
     ctx.lineWidth = (i % 5) == 0 ? 3 : 1;
     ctx.moveTo(0, -120);
     ctx.lineTo(0, -130);
     ctx.stroke();
     ctx.rotate(pitch);
   }//for

//秒針描画関数へ値渡し-------------------------------------------------
   var radH = (Math.PI * 2) / 12 * h + (Math.PI * 2) / 12 * (m / 60);
   var radM = (Math.PI * 2) / 60 * m;
   var radS = (Math.PI * 2) / 60 * s;

   drawHand(radH, 80, 4, "black");
   drawHand(radM, 130, 4, "black");
   drawHand(radS, 130, 2, "red");

   ctx.restore();//styleclear
 }//print


clock();//実行


//----------------------------------------------------------
/*
//createRandomColor
function bkgclor() {


 const randomColor = function(){
   const r = Math.floor(Math.random() * 256);
   const g = Math.floor(Math.random() * 256);
   const b = Math.floor(Math.random() * 256);
   return "rgb(" + r + ", " + g + ", " + b + ")";
 }

//backgroundColor
 ctx.fillStyle = randomColor();
 ctx.fillRect(0, 0, w, h);
}
*/

css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');


body {
 font-family: 'Open Sans Condensed', sans-serif;
 background-color: white;
 color: black;
}

span {
 text-align:  left;
 padding: 0px 5px 0px 5px;
 float: left;
}

span#clock_date {
 font-size: 35px;
}

span#clock_time {
 font-size: 35px;
}

/*時刻表示確認用
p#time {
 font-size: 2em;
 border: 1px solid;
}
*/

この記事が気に入ったらサポートをしてみませんか？