4:42 AM
G-Shop Online
Countdown Timer គឺជាគន្លឺះដ៏សំខាន់មួយ នៅពេលដែលអ្នកចង់បន្ថែម Feature ថ្មីទៅឲ្យគេហទំព័ររបស់អ្នក គឺយើងអាចប្រើប្រាស់នូវ Countdown Timer ដើម្បីអាចអ្នកទស្សនាCountdown Timer គឺជាគន្លឺះដ៏សំខាន់មួយ នៅពេលដែលអ្នកចង់បន្ថែម Feature ថ្មីទៅឲ្យគេហទំព័ររបស់អ្នក គឺយើងអាចប្រើប្រាស់នូវ Countdown Timer ដើម្បីអាចអ្នកទស្សនា
គេហទំព័ររបស់អ្នកបានដឹងជាមុន។ ដូច្នេះហើយនៅក្នុងអត្ថបទនេះ អាយធីកូនខ្មែរ សូមបង្ហាញអំពីរបៀបបង្កើត 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; |
ជំហានទី ៣៖ ចាប់យក ID ដើម្បីបង្ហាញពេលវេលា
1
2
| // get tag elementvar countdown = document.getElementById("countdown"); |
ជំហានទី ៤៖ បង្កើត setInterval() Function
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> |
0 comments:
Post a Comment