အခမဲ့ ကြာချိန်ရေတွက်စက်

မည်သို့ အလုပ်လုပ်သည်

Countdown timer သည် ပြင်ပ dependency လုံးဝမရှိဘဲ သင့် browser ထဲတွင် အလုပ်လုပ်ပါသည် — library၊ server call မပါဝင်ပါ။ ၎င်းသည် tick တိုင်းတွင် Date.now() နှင့် သိမ်းထားသော target timestamp ကြား ကွာဟချက်ကို တွက်ချက်ပေးသော 1-second setInterval ကို သုံးသဖြင့် tab ကို background တွင် ထားလျှင် (သို့) စက်၏ နာရီ ကွာလွန်လျှင်ပင် ပြသမှုသည် တိကျစွာ ဆက်လက် ရှိနေသည်။

1. 1
   Target တစ်ခု သတ်မှတ်ပါ

   Duration mode (နာရီ၊ မိနစ်၊ စက္ကန့်) ကို ရွေးချယ်ပါ (သို့) သတ်သတ်မှတ်မှတ် အချိန်တစ်ခုသို့ countdown ရန် date/time mode သို့ ပြောင်းပါ။ Quick-preset ခလုတ် ငါးခု (မိနစ် 5 မှ နာရီ 24 အထိ) သည် input များကို လုံးဝကျော်ပြီး timer ကို ချက်ချင်း စတင်ပေးသည်။
2. 2
   Interval သည် ကိန်းသေ target ပေါ် tick ဖြစ်သည်

   စတင်လိုက်သောအခါ ကိရိယာသည် absolute target ကို Date object အဖြစ် သိမ်းထားပြီး setInterval ကို 1000 ms တိုင်း ခေါ်သည်။ Tick တစ်ခုစီသည် Date.now() ကို ခေါ်ပြီး target မှ နုတ်သည် — ထို့ကြောင့် ကျော်သွားသော tick များ (tab အိပ်နေခြင်း၊ CPU အလုပ်များနေခြင်း) သည် lag စုပုံမနေဘဲ နောက်တစ် tick တွင် ကိုယ်တိုင် ပြင်ဆင်ပေးသည်။
3. 3
   အလိုက်သင့် ပြသမှုနှင့် tab mirroring

   ပြသမှုသည် ရှေ့ဆုံး သုည ယူနစ်များကို အလိုအလျောက် ချန်ထားသည် — 45 စက္ကန့် timer တစ်ခုသည် စာလုံးကြီးဖြင့် စက္ကန့်များကိုသာ ပြသပြီး ရက်များစွာ timer တစ်ခုသည် ယူနစ်လေးမျိုးစလုံးကို ပိုသေးသော size ဖြင့် ပြသည်။ ကျန်ရှိသော အချိန်ကို document.title ထဲသို့လည်း ရေးထားသဖြင့် countdown သည် minimize လုပ်ထား (သို့) background tab တွင်ပင် ဖတ်ရလွယ်ကူနေသည်။
4. 4
   ပြီးဆုံးသောအခါ Web Audio chime

   Countdown သည် သုညသို့ ရောက်ရှိသောအခါ browser ၏ built-in Web Audio API (AudioContext + OscillatorNode) သည် 880 Hz sine-wave chime တစ်ခုကို triple-pulse ဖြင့် ဖန်တီးသည် — audio ဖိုင် ဒေါင်းလုဒ်ချစရာမလိုပါ။ Pause၊ ဆက်လက်ပြုလုပ်ခြင်းနှင့် မျှဝေနိုင်သော URL (target epoch ကို server ကို ဘယ်တော့မှ မရောက်သော #to= fragment တွင် encode လုပ်ထားခြင်း) များကိုလည်း client-side တွင် လုံးဝ ကိုင်တွယ်သည်။

ဆက်နွှယ်သော ကိရိယာများ