01/06/14 ~ .

Monday, January 6, 2014

របៀបបង្កើត ពេលវេលារាប់ថយក្រោយ ជាមួយ JavaScript

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 to` `var` `target_date =` `new` `Date("Aug 15, 2013").getTime();`

ជំហានទី ២៖ បង្កើតអថេរ

1 2	`// variables for time units` `var` `days, hours, minutes, seconds;`

ជំហានទី ៣៖ ចាប់យក ID ដើម្បីបង្ហាញពេលវេលា

1 2	`// get tag element` `var` `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 target

var current_date = new Date().getTime();

var seconds_left = (target_date - current_date) / 1000;

ជំហានទី ៦៖ បំលែងវិនាទីទៅជាថ្ងៃ ម៉ោង នាទី

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 value

countdown.innerHTML = days + "d, " + hours + "h, "

+ minutes + "m, " + seconds + "s"; 

កូដពេញលេញ៖

<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>