របៀបបង្កើតនាឡិការាប់ពេលវេលាជាមួយនឹង FlipClock

• Sross Viech


• 21 Oct 2016

នាឡិកា(Clock) គឺជាឧបករណ៍សំរាប់កំនត់ពីពេលវេលាសំរាប់ឲ្យយើងដាក់គោលដៅក្នុងការធ្វើអ្វីមួយ ឲ្យបានច្បាស់លាស់និងជាការបង្ហាញនូវរយៈពេលមួយផងដែរ ។ TechFree សូមលើកយកនូវការបង្កើត នាឡិកានិងការរាប់ពេលវេលា (Countdown) ជាមួយនឹងបច្ចេកវិទ្យាដោយប្រើប្រាស់ភាសាកុំព្យូទ័រមួយគឺ JavaScript ។

ជាមួយនឹងភាសាកម្មវិធីកុំព្យូទ័រ Javascript នេះ យើងអាចប្រើប្រាស់ជាមួយនឹងបណ្ណាល័យ មួយដែល មានឈ្មោះថា Flipclock.js គឺជាបណ្ណាល័យមួយដែលពេញនិយមផងដែរ ដែលគេប្រើក្នុងការ បង្កើត នាឡិកានេះ ។យើងខ្ញុំសូមបង្ហាញអំពីរបៀបទាញយកបណ្ណាល័យនៅក្នុង Flipclock.js និងការប្រើប្រាស់វា ។

១) ការទាញយក

ជាដំបូង យើងត្រូវចូលទៅកាន់ http://www.flipclockjs.com ដើម្បីទាញយកបណ្ណាល័យមកប្រើ។

សូមមើលរូបខាងក្រោម ៖

២) ការប្រើប្រាស់

បន្ទាប់ពីការទាញយករួចរាល់ហើយមក យើងត្រូវរៀបចំវាទៅកាន់កន្លែងណាមួយនៅក្នុងកុំព្យូទ័រ ដើម្បី ងាយស្រួលក្នុងការមើល និងប្រើប្រាស់វា ។

រូបនេះបង្ហាញអំពីកន្លែងផ្ទុកឯកសារនៃ Flipclock ។

បន្ទាប់មកទៀត យើងត្រូវបង្កើតឯកសារ (file) និងចម្លងយកកន្លែងផ្ទុកឯកសារណាដែលត្រូវការប្រើ ។

រូបខាងក្រោមបង្ហាញពីការបង្កើត និងរៀបចំកន្លែងផ្ទុកឯកសារ ។

៣) ការសរសេរកូដ

ក្រោយពីការរៀបចំរួចរាល់ហើយ យើងត្រូវធ្វើការសរសេរកូដ ដើម្បីប្រើប្រាស់ទៅលើ FlipClock នេះ ។

• បន្ទាត់ទី៥ គឺយើងហៅកូដរចនា(Design) ពីក្នុង flipclock.css
• បន្ទាត់ទី៦ គឺយើងហៅកូដរបស់ Javascript ពីអ៊ិនធឺណេតផ្ទាល់ (រាល់ការប្រើប្រាស់Javascript គឺត្រូវប្រើកូដនេះជានិច្ច)
• បន្ទាត់ទី៧ គឺយើងហៅកូដរបស់ Javascript ពីdailycounter.js នៅក្នុងកន្លែងផ្ទុកឯកសារ
• បន្ទាត់ទី៨ គឺយើងហៅកូដរបស់ Javascript ពី flipclock.js នៅក្នុងកន្លែងផ្ទុកឯកសារ

បន្ទាប់ពីទាញយកកូដពីបណ្ណាល័យខាងលើរួចមក គឺយើងធ្វើការសរសេរកូដឲ្យវាដំណើរការតែម្ដង ។ ខាងក្រោមនេះគឺជាកូដរបស់ HTML  និង JavaScript សំរាប់បង្ហាញនូវលទ្ធផល ។

៤) លទ្ធផល

ក្រោយពីការបញ្ចប់ការរៀបចំ និងសរសេរកូដរួចហើយមក យើងនឹងទទួលបាននូវលទ្ធផលដូចខាងក្រោម ៖

ដើម្បីយល់កាន់តែច្បាស់អំពី FlipClock នេះ សូមទស្សនាវីដេអូ (video) ខាងក្រោមសំរាប់ការទាញយក  ការរៀបចំកន្លែងផ្ទុកឯកសារ និងការសរសេរកូដ ។