Penghitung hari

Terlebih dahulu, Selamat menyambut Tahun Baru kepada semua yg berkunjung.

Baki masa tahun 2024 - countdown ke tahun 2025

000 Hari

00 Jam

00 Minit

00 Saat

<div class="labu">
  <div class="bks">
    Baki masa tahun 2024 - countdown ke tahun 2025</div>
  <div class="pkira">
    <div class="kotak">
      <span class="num" id="day-box">000</span>
      <span class="text">Hari</span>
    </div>
    <div class="kotak">
      <span class="num" id="hr-box">00</span>
      <span class="text">Jam</span>
     </div>
    <div class="kotak">
      <span class="num" id="min-box">00</span>
      <span class="text">Minit</span>
     </div>
    <div class="kotak">
      <span class="num" id="sec-box">00</span>
      <span class="text">Saat</span>
     </div>
  </div>
</div>          
<style>
.labu *, .labu *::before, .labu *::after { box-sizing: border-box; color: #fff;}
  .labu {
    height: 100%;
    width: 100%;
  }
  .bks {
    font: large Georgia; 
    background: #333;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    width: 100%;
  }
  .pkira {
    margin-top: 0;
    background: #1a1a1a;
    display: flex;
    border-radius: 8px;
  }
  .kotak {
    font-family: Georgia;
    text-shadow: 1px 1px 3px #b45f06;
    margin: auto;
    padding-bottom: 1.4em;
    padding-top: .4em;
    align-items: center;
    justify-content: space-evenly;
    width: 6em;
    height: 8em;
    position: relative;
  }
  span.num {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-weight: 600;
    height: 100%;
    width: 100%;
    display: grid;  
    place-items: center;
    font-size: 2.8em;    
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.3);
    border-radius: 8px;
  }
  span.num:after {
    content:"";
    position: absolute;
    background: rgba(255, 255, 255, 0.08);  
    height: 100%;
    width: 50%;
    left: 0;
  }
  .text {
    font-size: 1em;
    background: rgba(255, 255, 255, 0.7);
    color: #111;
    display: block;
    width: 80%;
    position: relative;
    text-align: center;
    border-radius: 0.3em;
    border: 1px solid white;
    bottom: 20px;   
    margin-top: 10px;   
  }
 @media screen and (max-width: 600px) {
  span.num {
    font-size: 1.8em;
    }
  }
</style>
<script>
 let daybox=document.getElementById("day-box");
let hrbox=document.getElementById("hr-box");
let minbox=document.getElementById("min-box");
let secbox=document.getElementById("sec-box");
let endDate=new Date(2025,0,1,00,00);
let endTime=endDate.getTime();
function countdown(){
    let todayDate=new Date();
    let todayTime=todayDate.getTime();
    let remainTime=endTime-todayTime;
    let onemin=60*1000; //1min =60* 1000 milisecond (1sec in)
    let onehr=60*onemin; //1 hr = 1min * 60 
    let oneDay=24*onehr; // 1day = 24 * 1hr 
    let addZeros=(num)=>(num<10?`0${num}`:num);
    if(endTime<todayTime){
        clearInterval(i);
        document.querySelector(
            ".pkira"
        ).innerHTML=`<h1> Countdown Telah Tamat</h1>`;
    }else{
        let daysleft=Math.floor(remainTime/oneDay);
        let hrsleft=Math.floor((remainTime%oneDay)/onehr);
        let minleft=Math.floor((remainTime%onehr)/onemin);
        let secleft=Math.floor((remainTime%onemin)/1000);
        daybox.textContent=addZeros(daysleft);
        hrbox.textContent=addZeros(hrsleft);
        minbox.textContent=addZeros(minleft);
        secbox.textContent=addZeros(secleft);
    }
}
let i = setInterval(countdown, 1000);
countdown();
</script>

* Dikemaskini 01/01/24