practice

　　　　

<html>

<meta charset="utf-8">
<style>
body{background-color:#456789;}
li{position:absolute;
top:-26px;
left:-18px;
font-family:Impact;
font-size:28px;
color:#cdefff;
text-shadow:0 0 20px #ffffff;
list-style:none;}
li:nth-last-child(-n+3){left:-22px;}
span{position:absolute;
top:80px;
left:-42px;
font-family:"Arial Black";
font-size:14px;
color:#cdefff;
z-index:30;}
.時計{width:300px;
height:300px;
margin:80px auto;}
.中心点{position:absolute;
top:50%;
left:50%;
margin:0;
z-index:20;}
.クロック針{position:relative;
width:100%;
height:100%;
box-sizing:border-box;
border:4px solid #abcdef;
background-color:#123456;
border-radius:50%;}
.ダイアル文字盤{position:absolute;
top:50%;
left:50%;
margin:10;
padding:10;
z-index:10;}
.短い針{position:absolute;
left:-2px;
bottom:0;
width:5px;
height:70px;
display:block;
background-color:#ffffff;
transform-origin:50% bottom;}
.長い針{position:absolute;
left:-1px;
bottom:0;
width:3px;
height:120px;
display:block;
background-color:#cdefff;
transform-origin:50% bottom;}
.秒針{position:absolute;
left:0;
bottom:0;
width:1px;
height:120px;
display:block;
background-color:#ffffff;
transform-origin:50% bottom;}
.サークル{position:absolute;
left:-10px;
bottom:-10px;
width:20px;
height:20px;
display:block;
box-sizing:border-box;
border:4px solid #ffffff;
background-color:#000000;
border-radius:50%;}
</style>

<script>(function(){window.addEventListener("DOMContentLoaded",function(){let 全体表示=document.querySelector(".時計"),針表示=全体表示.querySelector(".クロック針"),回転表示=針表示.querySelector(".ダイアル文字盤"),組み合わせ表示=回転表示.querySelectorAll("li"),手動表示=針表示.querySelector(".中心点"),時間表示=手動表示.querySelector(".短い針"),分表示=手動表示.querySelector(".長い針"),秒表示=手動表示.querySelector(".秒針"),円表示=全体表示.clientWidth/2-20,流れ=false;Array.prototype.forEach.call(組み合わせ表示,function(element,設定){let 角度=(設定+1)*30,radian=(角度-90)/180*Math.PI,x=円表示*Math.cos(radian),y=円表示*Math.sin(radian);element.style.transform="translate("+x.toFixed(2)+"px,"+y.toFixed(2)+"px)";});let 接続=function(){let 日_動作=new Date(),時間_動作=日_動作.getHours(),分_動作=日_動作.getMinutes(),秒_動作=日_動作.getSeconds(),ミリ秒_動作=日_動作.getMilliseconds(),時_針設定=(時間_動作/12)*360,分_針設定=(分_動作/60)*360;if(流れ){秒_針設定=(Number((秒_動作+(ミリ秒_動作/1000)).toFixed(3).replace(".",""))/60000)*360;}else{秒_針設定=(秒_動作/60)*360;}時間表示.style.transform="rotate("+時_針設定+"deg)";分表示.style.transform="rotate("+分_針設定+"deg)";秒表示.style.transform="rotate("+秒_針設定+"deg)";};setInterval(接続,10);接続();});})();</script>

<div class="時計">
<div class="クロック針">
<ul class="ダイアル文字盤">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
</ul>
<div class="中心点">
<div class="短い針"></div>
<div class="長い針"></div>
<div class="秒針"></div>
<div class="サークル"></div>
<span>JavaScript</span>
</div>
</div>
</div>

</html>