practice

　　　　

<html>

<meta charset="utf-8">
<style>
*{margin:20px;}
span{position:fixed;
top:360px;
left:240px;
font-size:24px;
color:white;
text-shadow:-2px -2px 2px #000000;}
.クロック{position:fixed;
top:90px;
left:90px;
z-index:100;}
#文字盤{width:300px;
height:300px;
border:1px solid blue;
border-radius:50%;
background:linear-gradient(180deg,rgb(25,140,240),rgb(20,50,80));}
.ダイヤル_00{position:absolute;
top:139px;
left:142px;
font-size:18px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:10;}
.ダイヤル_1{position:absolute;
top:18px;
left:220px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:11;}
.ダイヤル_2{position:absolute;
top:72px;
left:272px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:12;}
.ダイヤル_3{position:absolute;
top:138px;
left:280px;
font-size:18px;
color:white;
transform:scale(1,0.5);
text-shadow:-2px -2px 2px #000000;
z-index:13;}
.ダイヤル_4{position:absolute;
top:216px;
left:273px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:14;}
.ダイヤル_5{position:absolute;
top:269px;
left:219px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:15;}
.ダイヤル_6{position:absolute;
top:276px;
left:142px;
font-size:18px;
color:white;
transform:scale(0.5,1);
text-shadow:-2px -2px 2px #000000;
z-index:16;}
.ダイヤル_7{position:absolute;
top:268px;
left:74px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:17;}
.ダイヤル_8{position:absolute;
top:214px;
left:25px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:18;}
.ダイヤル_9{position:absolute;
top:141px;
left:6px;
font-size:18px;
color:white;
transform:scale(1,0.5);
text-shadow:-2px -2px 2px #000000;
z-index:19;}
.ダイヤル_10{position:absolute;
top:73px;
left:25px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:20;}
.ダイヤル_11{position:absolute;
top:19px;
left:77px;
font-size:12px;
color:white;
text-shadow:-2px -2px 2px #000000;
z-index:21;}
.ダイヤル_12{position:absolute;
top:6px;
left:142px;
font-size:18px;
color:white;
transform:scale(0.5,1);
text-shadow:-2px -2px 2px #000000;
z-index:22;}
</style>

<div class="クロック">
<div class="ダイヤル_00">◉</div>
<div class="ダイヤル_12">▼</div>
<div class="ダイヤル_6">▲</div>
<div class="ダイヤル_3">◀︎</div>
<div class="ダイヤル_9">▶︎</div>
<div class="ダイヤル_1">■</div>
<div class="ダイヤル_11">■</div>
<div class="ダイヤル_2">■</div>
<div class="ダイヤル_10">■</div>
<div class="ダイヤル_4">■</div>
<div class="ダイヤル_8">■</div>
<div class="ダイヤル_5">■</div>
<div class="ダイヤル_7">■</div>
<span>CSS</span>
<canvas id="文字盤"width="300"height="300"></canvas>
</div>

<script>
let 文字盤=document.getElementById("文字盤");
let 時計=文字盤.getContext("2d");
setInterval(時間,1000);
function 時間()
{let 現在=new Date();
let 英=現在.getHours();
let 愛=現在.getMinutes();
let 江=現在.getSeconds();
英角=英/6*Math.PI;
愛角=愛/30*Math.PI;
江角=江/30*Math.PI;
時計.clearRect(0,0,300,300);
時計.strokeStyle="#ffffff";
時計.beginPath();
時計.lineWidth=6;
時計.moveTo(150,150);
時計.lineTo(150+Math.sin(英角)*100,150-Math.cos(英角)*100);
時計.stroke();
時計.strokeStyle="#ffffff";
時計.beginPath();
時計.lineWidth=3;
時計.moveTo(150,150);
時計.lineTo(150+Math.sin(愛角)*130,150-Math.cos(愛角)*130);
時計.stroke();
時計.strokeStyle="#ffffff";
時計.beginPath();
時計.lineWidth=1;
時計.moveTo(150,150);
時計.lineTo(150+Math.sin(江角)*140,150-Math.cos(江角)*140);
時計.stroke();}
</script>

<style>.ポジション{position:fixed;z-index:-10;}.メッシュ{fill:none;stroke:gray;stroke-width:0.4;}</style><div class="ポジション"><svg width="600"height="600"viewBox="0 0 600 600"><g><line class="メッシュ"x1="0"y1="0"x2="0"y2="600"/><line class="メッシュ"x1="20"y1="0"x2="20"y2="600"/><line class="メッシュ"x1="40"y1="0"x2="40"y2="600"/><line class="メッシュ"x1="60"y1="0"x2="60"y2="600"/><line class="メッシュ"x1="80"y1="0"x2="80"y2="600"/><line class="メッシュ"x1="100"y1="0"x2="100"y2="600"/><line class="メッシュ"x1="120"y1="0"x2="120"y2="600"/><line class="メッシュ"x1="140"y1="0"x2="140"y2="600"/><line class="メッシュ"x1="160"y1="0"x2="160"y2="600"/><line class="メッシュ"x1="180"y1="0"x2="180"y2="600"/><line class="メッシュ"x1="200"y1="0"x2="200"y2="600"/><line class="メッシュ"x1="220"y1="0"x2="220"y2="600"/><line class="メッシュ"x1="240"y1="0"x2="240"y2="600"/><line class="メッシュ"x1="260"y1="0"x2="260"y2="600"/><line class="メッシュ"x1="280"y1="0"x2="280"y2="600"/><line class="メッシュ"x1="300"y1="0"x2="300"y2="600"/><line class="メッシュ"x1="320"y1="0"x2="320"y2="600"/><line class="メッシュ"x1="340"y1="0"x2="340"y2="600"/><line class="メッシュ"x1="360"y1="0"x2="360"y2="600"/><line class="メッシュ"x1="380"y1="0"x2="380"y2="600"/><line class="メッシュ"x1="400"y1="0"x2="400"y2="600"/><line class="メッシュ"x1="420"y1="0"x2="420"y2="600"/><line class="メッシュ"x1="440"y1="0"x2="440"y2="600"/><line class="メッシュ"x1="460"y1="0"x2="460"y2="600"/><line class="メッシュ"x1="480"y1="0"x2="480"y2="600"/><line class="メッシュ"x1="500"y1="0"x2="500"y2="600"/><line class="メッシュ"x1="520"y1="0"x2="520"y2="600"/><line class="メッシュ"x1="540"y1="0"x2="540"y2="600"/><line class="メッシュ"x1="560"y1="0"x2="560"y2="600"/><line class="メッシュ"x1="580"y1="0"x2="580"y2="600"/><line class="メッシュ"x1="600"y1="0"x2="600"y2="600"/><line class="メッシュ"x1="0"y1="0"x2="600"y2="0"/><line class="メッシュ"x1="0"y1="20"x2="600"y2="20"/><line class="メッシュ"x1="0"y1="40"x2="600"y2="40"/><line class="メッシュ"x1="0"y1="60"x2="600"y2="60"/><line class="メッシュ"x1="0"y1="80"x2="600"y2="80"/><line class="メッシュ"x1="0"y1="100"x2="600"y2="100"/><line class="メッシュ"x1="0"y1="120"x2="600"y2="120"/><line class="メッシュ"x1="0"y1="140"x2="600"y2="140"/><line class="メッシュ"x1="0"y1="160"x2="600"y2="160"/><line class="メッシュ"x1="0"y1="180"x2="600"y2="180"/><line class="メッシュ"x1="0"y1="200"x2="600"y2="200"/><line class="メッシュ"x1="0"y1="220"x2="600"y2="220"/><line class="メッシュ"x1="0"y1="240"x2="600"y2="240"/><line class="メッシュ"x1="0"y1="260"x2="600"y2="260"/><line class="メッシュ"x1="0"y1="280"x2="600"y2="280"/><line class="メッシュ"x1="0"y1="300"x2="600"y2="300"/><line class="メッシュ"x1="0"y1="320"x2="600"y2="320"/><line class="メッシュ"x1="0"y1="340"x2="600"y2="340"/><line class="メッシュ"x1="0"y1="360"x2="600"y2="360"/><line class="メッシュ"x1="0"y1="380"x2="600"y2="380"/><line class="メッシュ"x1="0"y1="400"x2="600"y2="400"/><line class="メッシュ"x1="0"y1="420"x2="600"y2="420"/><line class="メッシュ"x1="0"y1="440"x2="600"y2="440"/><line class="メッシュ"x1="0"y1="460"x2="600"y2="460"/><line class="メッシュ"x1="0"y1="480"x2="600"y2="480"/><line class="メッシュ"x1="0"y1="500"x2="600"y2="500"/><line class="メッシュ"x1="0"y1="520"x2="600"y2="520"/><line class="メッシュ"x1="0"y1="540"x2="600"y2="540"/><line class="メッシュ"x1="0"y1="560"x2="600"y2="560"/><line class="メッシュ"x1="0"y1="580"x2="600"y2="580"/><line class="メッシュ"x1="0"y1="600"x2="600"y2="600"/></g><rect x="0"y="0"width="600"height="600"stroke="black"stroke-width="4"fill="transparent"/></svg></div>

</html>