BONGSOKLA.COM: បង្កើត Countdown ចូលឆ្នាំខ្មែរ ២០២៦ ស្ទីលពណ៌នៃសង្ក្រាន្ត (Free Code)

របៀបបង្កើតម៉ោងរាប់ថយក្រោយ (Countdown) សម្រាប់មហាសង្ក្រាន្ត ២០២៦

ផ្សព្វផ្សាយដោយ៖ បងសុខ្លា | ផ្នែក៖ បច្ចេកវិទ្យា & SEO

សួស្តីប្រិយមិត្តអ្នកអាន និងបងប្អូនអ្នកអភិវឌ្ឍន៍វេបសាយ (Web Developers) ទាំងអស់! ឱកាសបុណ្យចូលឆ្នាំថ្មីប្រពៃណីជាតិជិតឈានចូលមកដល់ហើយ។ ដើម្បីបង្កើនបរិយាកាសរីករាយនៅលើគេហទំព័រ ឬប្លុក (Blogger) របស់អ្នក ថ្ងៃនេះយើងនឹងមកសិក្សាអំពីការបង្កើត "ម៉ោងរាប់ថយក្រោយមហាសង្ក្រាន្ត" ដែលមានរូបរាងស្រស់ស្អាតតាមបែបខ្មែរ និងមានមុខងារឆ្លាតវៃ។

១. ការវិភាគលើរចនាសម្ព័ន្ធកូដ (Technical Analysis)

កូដដែលយើងយកមកបង្ហាញនេះ គឺជាការរួមបញ្ចូលគ្នារវាងបច្ចេកទេសស្នូលចំនួន ៣ គឺ HTML, CSS និង JavaScript៖

• HTML: ប្រើសម្រាប់សាងសង់គ្រោងឆ្អឹង (Structure) ដូចជាប្រអប់បង្ហាញថ្ងៃ ខែ ឆ្នាំ និងលេខរាប់ថយក្រោយ។
• CSS (ពណ៌នៃសង្ក្រាន្ត): គឺជាចំណុចលេចធ្លោបំផុត។ វាប្រើប្រាស់ពណ៌ក្រហមដិត (Dark Red) លាយជាមួយពណ៌មាស (Gold) ដើម្បីបង្កើតនូវអារម្មណ៍សិរីសួស្តី។ ការប្រើ linear-gradient និង box-shadow ធ្វើឱ្យ Widget នេះមើលទៅមានជម្រៅ និងមានលក្ខណៈទំនើប។
• JavaScript: គឺជាខួរក្បាលនៃកូដនេះ។ វាធ្វើការគណនាពេលវេលាដែលនៅសល់ រវាងម៉ោងបច្ចុប្បន្ន និងម៉ោងមហាសង្ក្រាន្ត (១៤ មេសា ២០២៦ ម៉ោង ១០:៤៨ ព្រឹក)។

២. មុខងារពិសេសដែលខុសពីកូដទូទៅ

អ្វីដែលធ្វើឱ្យកូដនេះពិសេស គឺវាមាន "ប្រព័ន្ធផ្លាស់ប្តូរសារដោយស្វ័យប្រវត្តិ"។ នៅពេលដែលម៉ោងរាប់ថយក្រោយដល់សូន្យ (ដល់ថ្ងៃចូលឆ្នាំ) JavaScript នឹងពិនិត្យមើលកាលបរិច្ឆេទជាក់ស្តែង៖

✅ ប្រសិនបើចំថ្ងៃទី ១៤ មេសា៖ វានឹងបង្ហាញសារសួស្តីថ្ងៃមហាសង្ក្រាន្ត។

✅ ប្រសិនបើចំថ្ងៃទី ១៥ មេសា៖ វានឹងប្តូរទៅជាសារថ្ងៃវារៈវ័នបត។

✅ ប្រសិនបើចំថ្ងៃទី ១៦ មេសា៖ វានឹងប្តូរទៅជាសារថ្ងៃឡើងស័ក។

មុខងារនេះជួយឱ្យប្លុករបស់អ្នកមានភាពរស់រវើក (Dynamic) ដោយមិនចាំបាច់ចូលទៅកែប្រែកូដជារៀងរាល់ថ្ងៃឡើយ។

៣. របៀបយកទៅប្រើប្រាស់

សម្រាប់បងប្អូនដែលប្រើប្រាស់ Blogger អ្នកគ្រាន់តែចូលទៅកាន់ Layout -> Add a Gadget -> HTML/JavaScript រួចចម្លងកូដខាងក្រោមនេះយកទៅដាក់ជាការស្រេច។ កូដនេះត្រូវបានរចនាឡើងជាលក្ខណៈ Responsive ដែលមានន័យថាវានឹងបង្ហាញរូបរាងស្អាតឥតខ្ចោះ ទាំងលើកុំព្យូទ័រ និងលើទូរស័ព្ទដៃ។

សូមរីករាយជាមួយសិរីសួស្តីឆ្នាំថ្មីទាំងអស់គ្នា!

🎊 សង្ក្រាន្តឆ្នាំថ្មី ឆ្នាំមមី អដ្ឋស័ក 🎊

មហាសង្ក្រាន្ត នឹងចូលមកដល់នៅម៉ោង ១០:៤៨ ព្រឹក
ថ្ងៃអង្គារ ១២រោច ខែចេត្រ ឆ្នាំមមី ព.ស. ២៥៦៩

១៤ មេសា: មហាសង្ក្រាន្ត ១៥ មេសា: វារៈវ័នបត ១៦ មេសា: ឡើងស័ក

00 ថ្ងៃ

00 ម៉ោង

00 នាទី

00 វិនាទី

📄 កូដរាប់ថយក្រោយមហាសង្ក្រាន្ត

<style>
  /* Container ចម្បង - ពណ៌មហាសង្ក្រាន្ត */
  .kny-container {
    position: relative;
    background: linear-gradient(135deg, #8b0000 0%, #b30000 100%);
    border: 3px solid #f1c40f;
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.4);
    border-radius: 20px;
    padding: 40px 20px 20px 20px;
    text-align: center;
    max-width: 100%;
    margin: 25px auto;
    font-family: 'Kantumruy Pro', 'Nokora', sans-serif;
    color: #ffffff;
    overflow: hidden;
  }

  /* ម៉ូតចំណងជើងបែប Floating Ribbon */
  .kny-title-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #f1c40f;
    color: #8b0000;
    padding: 5px 25px;
    font-weight: bold;
    font-size: 14px; 
    border-radius: 0 0 15px 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    z-index: 5;
    white-space: nowrap;
    border: 1px solid #8b0000;
    border-top: none;
  }

  /* ព័ត៌មានថ្ងៃសង្ក្រាន្តទាំង ៣ */
  .kny-info-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(241, 196, 15, 0.3);
  }

  .kny-subtitle {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #f1c40f;
    text-align: center;
    display: block;
  }

  .sangkran-days {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    margin-top: 10px;
    color: #fff;
    border-top: 1px solid rgba(241, 196, 15, 0.2);
    padding-top: 8px;
  }

  /* រចនាប័ទ្មម៉ោងរាប់ថយក្រោយ */
  .kny-timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  .kny-time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to bottom, rgba(241, 196, 15, 0.2), rgba(241, 196, 15, 0.05));
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 12px;
    padding: 12px 5px;
    transition: 0.3s;
  }
  
  .kny-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f1c40f;
    line-height: 1;
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  .kny-label {
    font-size: 0.7rem;
    color: #ffffff;
    font-weight: 500;
  }

  @media (max-width: 480px) {
    .kny-num { font-size: 1.4rem; }
    .kny-title-ribbon { font-size: 12px; }
    .kny-subtitle { font-size: 0.8rem; }
    .sangkran-days { font-size: 0.65rem; }
  }
</style>

<div class="kny-container">
  <div class="kny-title-ribbon">🎊 សង្ក្រាន្តឆ្នាំថ្មី ឆ្នាំមមី អដ្ឋស័ក 🎊</div>
  
  <div class="kny-info-box">
    <span class="kny-subtitle" id="status-msg">
      <b>មហាសង្ក្រាន្ត</b> នឹងចូលមកដល់នៅម៉ោង <b>១០:៤៨ ព្រឹក</b><br />
      ថ្ងៃអង្គារ ១២រោច ខែចេត្រ ឆ្នាំមមី ព.ស. ២៥៦៩
    </span>
    
    <div class="sangkran-days">
      <span>១៤ មេសា: មហាសង្ក្រាន្ត</span>
      <span>១៥ មេសា: វារៈវ័នបត</span>
      <span>១៦ មេសា: ឡើងស័ក</span>
    </div>
  </div>
  
  <div class="kny-timer">
    <div class="kny-time-block">
      <span class="kny-num" id="kny-days">00</span>
      <span class="kny-label">ថ្ងៃ</span>
    </div>
    <div class="kny-time-block">
      <span class="kny-num" id="kny-hours">00</span>
      <span class="kny-label">ម៉ោង</span>
    </div>
    <div class="kny-time-block">
      <span class="kny-num" id="kny-minutes">00</span>
      <span class="kny-label">នាទី</span>
    </div>
    <div class="kny-time-block">
      <span class="kny-num" id="kny-seconds">00</span>
      <span class="kny-label">វិនាទី</span>
    </div>
  </div>
</div>

<script>
  (function() {
    const targetDate = new Date("April 14, 2026 10:48:00").getTime();
    function updateCountdown() {
      const now = new Date().getTime();
      const distance = targetDate - now;
      const msgElement = document.getElementById("status-msg");
      if (distance < 0) {
        document.getElementById("kny-days").innerHTML = "00";
        document.getElementById("kny-hours").innerHTML = "00";
        document.getElementById("kny-minutes").innerHTML = "00";
        document.getElementById("kny-seconds").innerHTML = "00";
        const today = new Date();
        const dateStr = today.getDate();
        if (dateStr == 14) {
          msgElement.innerHTML = "<b>សួស្តីឆ្នាំថ្មី!</b> ថ្ងៃនេះជាថ្ងៃមហាសង្ក្រាន្ត<br/>សូមទេវតាឆ្នាំថ្មី តាមជួយថែរក្សាបងប្អូនទាំងអស់គ្នា!";
        } else if (dateStr == 15) {
          msgElement.innerHTML = "<b>សួស្តីឆ្នាំថ្មី!</b> ថ្ងៃនេះជាថ្ងៃវារៈវ័នបត (ថ្ងៃទី២)<br/>សូមឱ្យមានសិរីសួស្តី ជោគជ័យគ្រប់ភារកិច្ច!";
        } else if (dateStr >= 16) {
          msgElement.innerHTML = "<b>សួស្តីឆ្នាំថ្មី!</b> ថ្ងៃនេះជាថ្ងៃឡើងស័ក (ថ្ងៃទី៣)<br/>សិរីសួស្តីជ័យមង្គល ចូលមកដល់ក្នុងគ្រួសារ!";
        }
        return;
      }
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      document.getElementById("kny-days").innerHTML = days < 10 ? "0" + days : days;
      document.getElementById("kny-hours").innerHTML = hours < 10 ? "0" + hours : hours;
      document.getElementById("kny-minutes").innerHTML = minutes < 10 ? "0" + minutes : minutes;
      document.getElementById("kny-seconds").innerHTML = seconds < 10 ? "0" + seconds : seconds;
    }
    setInterval(updateCountdown, 1000);
    updateCountdown(); 
  })();
</script>