ပထမဆံုး count down timer ကိုဖန္တီးဖို႔အတြက္ millisecond ရဲ႕ ၾကာခ်ိန္ကို ယူသံုးဖို႔လိုပါတယ္
ဒီေတာ႔ js မွာပါတဲ႔ window.setTimeout function ကို ယူသံုးၾကည္႔ရေအာင္ဗ်ာ
window.setTimeout("tick()",1000); // 1000 ဆိုတာ 1 second ကိုေျပာတာပါ
function tick() {
}
ဆိုလိုတာက ၁ စကၠန္ျပီးသြားတိုင္း tick function ကိုျပန္ေခၚသံုးမယ္ဆိုတာကိုေျပာတာပါ
ဒါေပမယ္႔ ကၽြန္ေတာ္တို႔က tick ကိုေခၚလိုက္တဲ႔အခ်ိန္တိုင္း timer ကို 1 second အျဖစ္ထားမွာပါ
အဲဒီ timer ကိုအလုပ္ဆက္လုပ္ေစဖို႔ ဒီလိုဆက္ေရးေပးပါမယ္
window.setTimeout("tick()",1000);
function tick(){
window.setTimeout("tick()",1000);
}
အခုဆိုရင္ အေျခခံက်တဲ႔ timer ကုိလုပ္လို႔ျပီးသြားပါျပီ tick funciton ကေတာ႔ ကၽြန္ေတာ္ေစာေစာကေျပာခဲ႔သလိုပဲ႔
second တိုင္းမွာေခၚေနမွာပါ( ခ်စ္ခ်စ္ကိုသတိရတယ္)ဒါေပမယ္႔ ကၽြန္ေတာ္တို႔က time မွာ တစ္ခုခု ကိုေျပာင္းလဲ အသံုးျပဳခ်င္ပါတယ္
ဒီေတာ႔ အေပၚက Code ကိုနည္းနည္းျပင္ေရးရေအာင္
var Timer;
var TotalSeconds;
function CreateTimer(TimerID,Time){
Timer=document.getElementById(TimerID);
TotalSeconds=Time;
UpdateTimer();
window.setTimeout("tick()",1000);
}
function tick(){
TotalSeconds -=1;
UpdateTimer();
window.setTimeout("tick()",1000);
}
function UpdateTimer(){
Timer.innerHTML=TotalSeconds;
}
Timer.js ဆိုျပီးခဏသိမ္းထားလိုက္ပါ
အဲေလာက္ဆုိရင္ ကၽြန္ေတာ္တို႔လိုခ်င္တဲ႔ Timer & seconds ရဲ႕ id ကိုရျပီး timer ကိုဖန္တီးလိုက္တဲ႔ Function တစ္ခုရွိပါျပီ၊
ျပီးေတာ႔ 1 second ၾကာတိုင္းအလုပ္လုပ္မယ္႔ tick function ကိုျပန္ေခၚသံုးျပီး Update timer ကိုလည္းျပန္သံုးမွာပါ
Update timer function ကေတာ႔ လက္်န္စကၠန္႔အေရတြက္ကို timer အေနျဖင္႔ထားမွာပါ
အေပၚက ဥပမာေလးက element ထဲမွာျပထားတဲ႔ ၁ စကၠန္ဆိုတဲ႔ element ေလးကိုရိုးရိုးေလးသံုးျပသြားတာပါ
ေနာက္တစ္ခုဆက္ေရးရေအာင္
<html>
<head>
<script type="text/javscript" src="Timer.js"/>
</head>
<body>
<div id='timer'/>
<script type="text/javascript">window.onload=CreateTimer("timer",30);</script>
</body>
</html>
အေပၚက div ကေတာ႔ ကၽြန္ေတာ္တို႔ timer ပါ
ေအာက္က js code က timer ကို ၃၀ seconds ျပီးတိုင္းစတင္ပါမယ္
ဒါေပမယ္႔ ကၽြန္ေတာ္တို႔ထပ္ထည္႔သင္႔တဲ႔ အရာႏွစ္ခုရွိပါေသးတယ္ ပထမတစ္ခုကေတာ႔ timer က 0 ကေနစတင္ရမွာပါဒါမွ
negative value နဲ႔မစတင္မွာပါ ဒါေၾကာင္႔ tick function ကို နည္းနည္းခ်ိန္းရေအာင္
function tick() {
if(TotalSeconds <= 0 ) {
alert("Time's is up!");
return;
}
TotalSecond -=1;
UpdateTimer();
window.setTimeout("tick()",1000);
}
TotalSecond ကို auto - လုပ္လို႔ timer က 0 ေရာက္တဲ႔အခါ alert box ေလးတက္လာမွာပါ ျပီးေတာ႔ function ကိုထြက္ဖို႔အတြက္ return ကိုသံုးထားပါတယ္
function က ထြက္လိုက္တဲ႔အခါ timer ကို stop ျဖစ္သြားမွာပါ window.setTimeout line ကိုမေရာက္ခင္ function ကေနထြက္သြားမွာပါ
အျခားတစ္ခုကေတာ႔ seconds,minutes,hours ေတြရဲ႕ conversion ကို ေပါင္းထည္႔ေပးရမွာပါဒီေတာ႔ Update timer function ကိုနည္းနည္းေလးခ်ိန္းရေအာင္
function UpdateTimer() {
var Seconds = TotalSeconds;
var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;
var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);
var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);
var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
Timer.innerHTML = TimeStr;
}
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
The output is
00:00:30 Cyberoot Set time
Timer.js ကို သံုးရလြယ္ေအာင္ တစ္ခါတည္းေပါင္းေရးလိုက္တာပါ
The full source code is
<html>
<head>
<script type="text/javascript">
var Timer;
var TotalSeconds;
function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
function Tick() {
if (TotalSeconds <= 0) {
alert("Time's up!,Thanks for reading")
return;
}
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
function UpdateTimer() {
var Seconds = TotalSeconds;
var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;
var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);
var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);
var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
Timer.innerHTML = TimeStr + " Cyberoot Set time";
}
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
</script>
</head>
<body>
<div id='timer' />
<script type="text/javascript">window.onload = CreateTimer("timer", 30);</script>
</body>
</html>
No comments:
Post a Comment
Thanks for your comments
Welcome from cyberoot