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

شکل تایمرقرار یک تایمر به شکل بالا بسازیم:اول فرض کنید معلم ورزش هستین و قرار از بچه ها امتحان دویدن بگیرین ، حالا با استفاده از تایمر بالا اسم هاشونو در کادر مینویسین بعد دکمه استارت رو میزنین ، بعد اتمام دویدن هر کدوم از دانش آموزا دکمه فینیش رو میزنین و سر آخر تایمشون رو با دکمه رکورد در قسمت پا ئین ثپت می کنین و در مرحله پایانی تایم رو ری ست می کنین و برا دانش آموز بعدی این کار رو انجام میدین.حالا که همه دویدن باید بتونیم سه نفر اول رو که تایمشون از بقیه بهتر رو پیدا کنیم خوب اینجا هم دکمه سورت رو می زنیم و تمام(خیلی راحت،آسون،بی دردسر و بی قلم و خودکار و .... :)داستان تموم شد بریم سراغ قسمت جالب قضیه :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) }) })فایل ها رو میتونید از لینک زیر دانلود کنید https://github.com/mamadhasn/RUNNER-TIMER در پست بعدی انشالله به طور کامل به توضیح کد ها می پردازم :)