Countdown Timer គឺជាគន្លឺះដ៏សំខាន់មួយ នៅពេលដែលអ្នកចង់បន្ថែម Feature
ថ្មីទៅឲ្យគេហទំព័ររបស់អ្នក គឺយើងអាចប្រើប្រាស់នូវ Countdown Timer
ដើម្បីអាចអ្នកទស្សនា
គេហទំព័ររបស់អ្នកបានដឹងជាមុន។ ដូច្នេះហើយនៅក្នុងអត្ថបទនេះ អាយធីកូនខ្មែរ សូមបង្ហាញអំពីរបៀបបង្កើត Countdown Timer ដោយប្រើប្រាស់នូវភាសា Javascript។
ជំហានទី ១៖ កំនត់នូវពេលវាលាបញ្ចប់
ជំហានទី ២៖ បង្កើតអថេរ
ជំហានទី ៣៖ ចាប់យក ID ដើម្បីបង្ហាញពេលវេលា
ជំហានទី ៤៖ បង្កើត setInterval() Function
Function setInterval() គឺវាដំនើរការដោយស្វ័យប្រវត្តិដោយពេលជាក់លាក់ណាមួយ។ ដូច្នេះហើយយើងកំនត់ឲ្យវាដំនើរការរៀងរាល់ 1000 Milisecond(1 វិនាទី) ម្តង។
ជំហានទី ៥៖ គណនាចំនួនវិនាទីសរុប
ជំហានទី ៦៖ បំលែងវិនាទីទៅជាថ្ងៃ ម៉ោង នាទី
ជំហានទី ៧៖ តំរៀបពេលវេលាតាមលំដាប់
កូដពេញលេញ៖
Download Demo
គេហទំព័ររបស់អ្នកបានដឹងជាមុន។ ដូច្នេះហើយនៅក្នុងអត្ថបទនេះ អាយធីកូនខ្មែរ សូមបង្ហាញអំពីរបៀបបង្កើត Countdown Timer ដោយប្រើប្រាស់នូវភាសា Javascript។
ជំហានទី ១៖ កំនត់នូវពេលវាលាបញ្ចប់
1
2
| // set the date we're counting down tovar target_date = new Date("Aug 15, 2013").getTime(); |
1
2
| // variables for time unitsvar days, hours, minutes, seconds; |
1
2
| // get tag elementvar countdown = document.getElementById("countdown"); |
Function setInterval() គឺវាដំនើរការដោយស្វ័យប្រវត្តិដោយពេលជាក់លាក់ណាមួយ។ ដូច្នេះហើយយើងកំនត់ឲ្យវាដំនើរការរៀងរាល់ 1000 Milisecond(1 វិនាទី) ម្តង។
1
2
3
| setInterval(function () { // code here}, 1000); |
1
2
3
| // find the amount of "seconds" between now and targetvar current_date = new Date().getTime();var seconds_left = (target_date - current_date) / 1000; |
1
2
3
4
5
6
7
8
| days = parseInt(seconds_left / 86400);seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600);seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60);seconds = parseInt(seconds_left % 60); |
1
2
3
| // format countdown string + set tag valuecountdown.innerHTML = days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s"; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <html><head><title>Countdown</title><script type="text/javascript">window.onload=function(){ var target_date=new Date("Aug 15, 2013").getTime(); var days, hours, minutes, seconds; var countdown=document.getElementById("countdown"); setInterval(function(){ var current_date=new Date().getTime(); var second_left=(target_date - current_date)/1000; days=parseInt(second_left/86400); second_left=second_left%86400; hours=parseInt(second_left/3600); second_left=second_left%3600; minutes=parseInt(second_left/60); seconds=parseInt(second_left % 60); countdown.innerHTML= days + "day(s), " + hours + "h:" + minutes + "m:" + seconds + "s"; }, 1000);}</script></head><body><span id="countdown"></span>until our website is released!</body></html> |
