![SampleCounter.png](https://steemitimages.com/DQmcJj86ZWRJykQmwfJ4NMX9EwtdpAZd4Mymp8Qc4eyQ1nN/SampleCounter.png)

យើងអាចបង្ហាញនាឡិកាដែលនឹងត្រូវបានបង្ហាញម៉ោងក្នុងកុំព្យូទ័រដោយប្រើ JavaScript។ អត្ថបទនេះនឹងបង្ហាញពីរបៀបបង្ហាញម៉ោងជាភាសាខ្មែរនៅលើវេបសាយ។

**១) ការទទួលយកពេលវេលាបច្ចុប្បន្ន**

ប្រសិនបើយើងចង់បង្កើតនាឡិកាមួយ អញ្ជឹងយើងត្រូវទៅយកពេលបច្ចុប្បន្ន។ យើងអាចធ្វើដូចនេះបានតាមរយៈ JavaScript Date class។ ដំបូងយើងបង្កើត `Date object` មិនមែនជាប៉ារ៉ាម៉ែត្រទេ ដែលផ្តល់ឱ្យយើងនូវ Date object មួយដែលមានកាលបរិច្ឆេទ និង ពេលវេលាបច្ចុប្បន្ននៅលើកុំព្យូទ័រ។

![001-1.png](https://steemitimages.com/DQmRfPRU9j8aqJdgYRKXRyTRNwxPqnnVs4QaQDr7HdNZ2gv/001-1.png)

បន្ទាប់មកទៀតយើងស្រង់ចេញជា ម៉ោង, នាទី និងសមាសភាគវិនាទី នៃពេលវេលាបច្ចុប្បន្នពី Date object។

![002-1.png](https://steemitimages.com/DQmRDGuWSw466kz5uWE2DZwoU5BEvjUYAaWNuevALHD3aEh/002-1.png)

**២) ការធ្វើទ្រង់ទ្រាយពេលវេលា (Formatting the time)**

ឥឡូវនេះថាយើងមានតម្លៃសមាសភាគទាំងបី នៃពេលវេលាបច្ចុប្បន្នរបស់យើង, សូមធ្វើទ្រង់ទ្រាយពួកវាទៅជា string ដែលបានបង្ហាញនៅក្នុងទំព័របណ្ដាញ (Web page)។ យើងចង់ឱ្យវាក្លាយទៅជាទ្រង់ទ្រាយ “HH: MM: SS XX”, ជាកន្លែងដែល XX មានទាំង “ព្រឹក (AM)” ឬ “ល្ងាច (PM)” (សន្មត់ថាយើងមានទ្រង់ទ្រាយនាឡិកា 12 ម៉ោង) ។

ជាដំបូងយើងនឹងបន្ថែមលេខសូន្យទៅជាតម្លៃនាទី និងវិនាទីប្រសិនបើចាំបាច់។

![003-1.png](https://steemitimages.com/DQmNR18ZQsLptA6hFqsV7NekwDqtdFyXqixpWvhewa1un5q/003-1.png)

បន្ទាប់យើងនឹងកំណត់អថេរមួយ timeOfDay ដើម្បី “ព្រឹក (AM)” ឬ “ល្ងាច (PM)” ជាការសមរម្យ ដកលេខ 12 ពីសមាសភាគម៉ោង, ប្រសិនបើបានទាមទារដើម្បីបំលែងវាទៅជាទ្រង់ទ្រាយ 12 ម៉ោង។ យើងដូចជាសមាសភាគម៉ោងដើម្បីបង្ហាញពី 12 ម៉ោង ច្រើនជាង 0, ដូច្នេះយើងត្រូវការដើម្បីបន្ថែមផងដែរ។

![004-1.png](https://steemitimages.com/DQmRoZWDXDVoPJRfbaLoeZ56kZRTM9xi9FJLa5NRUDtMh4E/004-1.png)

ទីបំផុតយើងនឹងចូលរួមជាមួយសមាសភាគដែលបានធ្វើទ្រង់ទ្រាយរបស់យើងទាំងអស់ចូលគ្នាទៅក្នុង string តែមួយក្នុងទ្រង់ទ្រាយ “HH: MM: SS XX”។

![005-1.png](https://steemitimages.com/DQmP66VLm1K473RcqUQWBYz8RCp3RDjSjwLBUME7e1no6p7/005-1.png)

**៣) បង្ហាញនាឡិកា (Displaying the clock)**

ឥឡូវនេះយើងមានពេលវេលា string សម្រាប់បង្ហាញ, ជំហានបន្ទាប់គឺដើម្បីបង្ហាញវានៅក្នុងទំព័របណ្តាញ។ ដើម្បីធ្វើដូចនេះលើកដំបូងយើងត្រូវបង្កើត `<span></span>` ដើម្បីបង្ហាញពេលវេលា។

![006-1.png](https://steemitimages.com/DQmX4b1xPS3msTxQ6K4sWtysMu566cr68NLVxyHBRSNmf7d/006-1.png)

ដោយដាក់ `&nbsp;` នៅខាងក្នុងធាតុ `<span>` នេះយើងកំពុងបង្កើត text node សម្រាប់ span ក្នុង DOM នេះ។

![007-1.png](https://steemitimages.com/DQmQg59psXtJrwhKZP8SqwxRgdsrKSoGV76TDX98UG2NmoS/007-1.png)

ដើម្បីធ្វើឱ្យម៉ោងទាន់សម័យរៀងរាល់ វិនាទី, យើងត្រូវប្រើវិធីសាស្ដ្រ `Window.setInterval ()` ពីក្នុងស្លាក body ដើម្បីហៅមុខងារ `updateClock ()` ក្នុងមួយវិនាទីម្តង។  យើងគួរតែហៅ `updateClock ()` នៅពេល page loads។

![008.png](https://steemitimages.com/DQmdht8R4PKdt2pczwFbUC94TfQAbmQLtA9ku4ssGsZ6mou/008.png)

**៤) ដាក់វាទាំងអស់រួមគ្នា (Putting it all together)**

ខាងក្រោមនេះជាកូដ JavaScript បញ្ចប់។ យើងបានដាក់កូដទាំងអស់ទៅក្នុងមុខងារ JavaScript updateClock ()

![coding01-1.png](https://steemitimages.com/DQmWtwLiMCJ12V9G4eh5a2aLTN2YVNJUzygvmTJwnUS8zwG/coding01-1.png)

![coding-time-javascript.png](https://steemitimages.com/DQmSzbHJwN56zhodJQb4UrSYjCDq2rX8CSHPgp4L8P4Ath8/coding-time-javascript.png)

យើងបានលទ្ធផលដូចខាងក្រោម

![khmer-time-javascript-result.png](https://steemitimages.com/DQmUbdn2J58pZ3bW2ctFsgYxKGxjXANekXtNMUTnNBh9JnA/khmer-time-javascript-result.png)


[ប្រភពដើម](https://www.techfree.info/2016/10/21/khmer-time-javascript/)