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

قرار یک تایمر به شکل بالا بسازیم:

اول فرض کنید معلم ورزش هستین و قرار از بچه ها امتحان دویدن بگیرین ، حالا با استفاده از تایمر بالا اسم هاشونو در کادر مینویسین بعد دکمه استارت رو میزنین ، بعد اتمام دویدن هر کدوم از دانش آموزا دکمه فینیش رو میزنین و سر آخر تایمشون رو با دکمه رکورد در قسمت پا ئین ثپت می کنین و در مرحله پایانی تایم رو ری ست می کنین و برا دانش آموز بعدی این کار رو انجام میدین.حالا که همه دویدن باید بتونیم سه نفر اول رو که تایمشون از بقیه بهتر رو پیدا کنیم خوب اینجا هم دکمه سورت رو می زنیم و تمام(خیلی راحت،آسون،بی دردسر و بی قلم و خودکار و .... :)

داستان تموم شد بریم سراغ قسمت جالب قضیه :

html
<div id=&quotcont&quot>
<h1 id=&quotgo&quot>00:00:00</h1>
<div id=&quotinpu&quot>
<label for=&quotesmesh&quot>NAME OF RUNNER</label><br>
<input type=&quottext&quot id=&quotesmesh&quot placeholder=&quotenter runner name&quot><br>
</div>
<div id=&quotbtu&quot>
<button id=&quotstart&quot>start</button>
<button id=&quotfinish&quot>finish</button>
<button id=&quotregister&quot>record</button>
<button id=&quotreset&quot>reset</button>
</div>
<button id=&quotSORT&quot>SORT RUNNER BY THEIR TIME</button>
<div id=&quotadd&quot></div>
</div>

css
.cont{
text-align: center;
display: flex;
flex-direction: column;
}
h1{
background-color:#07d30a ;
display: block;
font-size: 90px;
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
h1{
background-color:#07d30a ;
display: block;
font-size: 34px;
}}
#btu{
margin-top: 3rem;
}
button{
padding: 20px;
background-color: black;
color: aliceblue;
border-radius: 12px;
}
span{
line-height: 12px;
background-color: aqua;
}
label{
background-color: rgb(0 0 0);
color: rgb(36 209 15);
font-weight: bold;
font-size: 30px;
}
input{
padding: 20px;
}
li{
list-style-type: auto;
line-height: 35px;
margin-top: 20px;
background-color: #07d30a;
}

javascript
//گرفتن  المنت های مدنظر
const esmesh=document.getElementById(&quotesmesh&quot)
const start=document.getElementById(&quotstart&quot)
const register=document.getElementById(&quotregister&quot)
const finish=document.getElementById(&quotfinish&quot)
const reset=document.getElementById(&quotreset&quot)
const hh=document.getElementById(&quotgo&quot)
const sort=document.getElementById(&quotSORT&quot)
//تعریف آرایه خالی برای پوش کردن اسم و تایم دونده ها
let all_Arry=[];
let mili=0;
let sec=0;
let min=0
let hor=0;
let every;
// استفاده از ایونت ها
start.addEventListener(&quotclick&quot,e=>{
every= setInterval(() => { timer(); }, 10);
})

register.addEventListener(&quotclick&quot,e=>{
const elem=document.createElement(&quotli&quot)
elem.textContent=`${esmesh.value} time is${hor}:${min}:${sec}:${mili} `
document.getElementById(&quotadd&quot).append(elem)
all_Arry.push({
name:esmesh.value,
time:parseInt(hor*24*60*60*1000+min*60*1000+sec*1000+mili)
})
console.log(all_Arry);
esmesh.value=&quot&quot
})
finish.addEventListener(&quotclick&quot,e=>{
clearInterval(every)
})
reset.addEventListener(&quotclick&quot,e=>{
sec=0;
min=0
hor=0;
hh=`00:00:00`
})
function timer(){
mili+=10;
if(mili==1000){
sec++;
sec=sec<10 ? &quot0&quot+sec:sec
return mili=0
}
if(sec===60){
min++;
min=min<10 ? &quot0&quot+min:min
return sec=0
}
if(min===60){
hor++;
hor=hor<10 ? &quot0&quot+hor:hor
return min=0
}

hh=`${hor}:${min}:${sec}:${mili}`
}
sort.addEventListener(&quotclick&quot,e=>{
let sorted= all_Arry.sort((a,b)=>{
return  b.time-a.time
})


const dele=document.getElementById(&quotadd&quot)
dele.textContent=&quot&quot
sorted.forEach(e=>{
let ms = e.time
let sanie= Math.floor((ms/1000/60) << 0)
let dagig = Math.floor((ms/1000) % 60);
const elem=document.createElement(&quotli&quot)

elem.textContent=`${e.name} time is ${dagig}min and ${sanie}sec `
document.getElementById(&quotadd&quot).append(elem)
})

})

فایل ها رو میتونید از لینک زیر دانلود کنید

در پست بعدی انشالله به طور کامل به توضیح کد ها می پردازم :)