アナログ時計【javascript】
こんな感じのアナログ時計が出来ます
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;
}
*/