چگونه با جاوااسکریپت ساعت بسازیم؟

قرار با کمک html و css و javascript یه همچین چیزی بسازیم که در واقع دوتا ساعته یکیش آنالوگ و دیگری دیجیتاله

html
<!-- // digital clock -->
<h1 id=&quotclock&quot>
<span id=&quothourespan&quot></span>:
<span id=&quotminutespan&quot></span>:
<span id=&quotsecondspan&quot></span>
</h1>
<!-- // analog clock -->
<div class=&quotconten&quot>
<p class=&quotone&quot></p>
<p class=&quottwo&quot></p>
<p class=&quotthree&quot></p>
<p class=&quotfour&quot></p>
<p class=&quotfive&quot></p>
<p class=&quotsix&quot></p>
<div class=&quotsubcont&quot>
<p class=&quotfirsthand&quot></p>
<p class=&quotsecondhand&quot></p>
<p class=&quotthirdhand&quot></p>
<p class=&quotcenter-nail&quot></p>
</div>
</div>

css
*{
background-color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h1{
text-align: center;
margin-left: auto;
margin-right: auto;
color: aqua;
margin-top: 35px;
border: 2px red solid;
width: 41%;
box-shadow: 0px 0px 5px 3px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.conten{
background-color: rgb(0 0 0);
height: 200px;
border-radius: 50%;
width: 200px;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 30px;
box-shadow: 0px -1px 6px 0px #e7e7e7;
}
.one{
background-color: aqua;
height: 41px;
position: absolute;
width: 200px;
height: 2px;
top: 99px;
}
.two{
background-color: aqua;
height: 41px;
position: absolute;
width: 200px;
height: 2px;
top: 99px;
left: 1px;
transform: rotateZ(90deg);
}
.three,.four,.five,.six{
height: 41px;
position: absolute;
width: 200px;
height: 2px;
top: 99px;
left: 1px;
background-color: rgb(218, 192, 41);
}
.three{
transform: rotateZ(117deg);
}
.four{
transform: rotateZ(150deg);
}
.five{
transform: rotateZ(213deg);
}
.six{
transform: rotateZ(244deg);
}
.subcont{
position: absolute;
width: 178px;
height: 167px;
top: 19px;
left: 12px;
background-color: rgb(0 0 0);
border-radius: 50%;
}
.firsthand{
position: absolute;
width: 85px;
height: 2px;
top: 75px;
left: 86px;
background-color: rgb(214, 12, 1);
transform-origin: 0px bottom;
}

.secondhand{
position: absolute;
width: 60px;
height: 2px;
top: 75px;
left: 86px;
background-color: rgb(41 218 87);
transform-origin: 0px bottom;
}
.thirdhand{
position: absolute;
width: 54px;
height: 4px;
top: 75px;
left: 86px;
background-color: rgb(41 63 218);
transform: rotate(106deg);
transform-origin: 0px bottom;
}
.center-nail{
position: absolute;
width: 18px;
height: 19px;
top: 70px;
left: 79px;
background-color: rgb(5 10 7 / 99%);
border-radius: 50%;
box-shadow: inset 0px 0px 1px wheat;
}

js

setInterval(callme,10)
function callme(){
let date=new Date
let second=date.getSeconds()
let minute=date.getMinutes()
let houre=date.getHours()
const hourespan=document.getElementById(&quothourespan&quot)
const minutespan=document.getElementById(&quotminutespan&quot)
const secondspan=document.getElementById(&quotsecondspan&quot)
const helment=document.getElementById(&quotclock&quot)
second= second<9 ? &quot0&quot+second:second
// minute= minute<9 ? &quot0&quot+minute:minute
// houre= houre<9 ? &quot0&quot+houre:houre
let amorpm=houre<12 ?&quotam&quot:&quotpm&quot
helment=`${houre}: ${minute}: <span id=&quotseccss&quot> ${second}
</span>  ${amorpm}`
}
const firsthand=document.querySelector(&quot.firsthand&quot)
const secondhand=document.querySelector(&quot.secondhand&quot)
const thirdhand=document.querySelector(&quot.thirdhand&quot)
let first_hand_degree=6
let second_hand_degree=6
let third_hand_degree=6
setInterval(spinhand,1000);
function spinhand(){
if(first_hand_degree<=360){
firsthand.style.transform = `rotate(${first_hand_degree}deg)`;
first_hand_degree=first_hand_degree+6
}else if(first_hand_degree>360){
first_hand_degree=100
secondhand.style.transform = `rotate(${second_hand_degree}deg)`;
second_hand_degree=second_hand_degree+6
}
if(second_hand_degree>360){
const thirdhand=document.querySelector(&quot.thirdhand&quot)
second_hand_degree=6
thirdhand.style.transform =`rotate(${third_hand_degree}deg)`;
third_hand_degree+=6
}
if(third_hand_degree>360){
third_hand_degree=6
}
}

لینک فایل ها