شمارنده معکوس تا زمان معین

1 - شمارنده معکوس تا زمان معین.markdown

یک شمارش معکوس روز نوروز ایجاد کنید

A Pen by webramin on CodePen.

License.

index.html

<div class="new-year-card">
  <div class="remainder">
    <h1>تا پایان خدمت</h1>
    <div class="time">
      <div><div class="day"><span>0</span></div>روز</div>
      <div><div class="hour"><span>0</span></div>ساعت</div>
      <div><div class="min"><span>0</span></div>دقیقه</div>
      <div><div class="sec"><span>0</span></div>ثانیه</div>
    </div>
    <p>باقی مانده است</p>
  </div>
  <div class="happy">
    <h1>سال 1401 مبارک!</h1>
  </div>
</div>

script.js

// https://www.instagram.com/p/CMCCLf8Bdek/

//const nowruz = moment('1399/12/30', 'jYYYY/jMM/jDD'); 
//nowruz.hour(13); nowruz.minute(7); nowruz.second(28);

const nowruz = moment('1402/08/01', 'jYYYY/jMM/jDD'); 
//nowruz.hour(0); nowruz.minute(54); nowruz.second(28);

const MIN  = 60;
const HOUR = MIN  * 60;
const DAY  = HOUR * 24; 

 
const interval = setInterval(() => {
    let remainder = nowruz.unix() - moment().unix(); 
    if(remainder <= 0){
        document.querySelector('.remainder').style.display = 'none';
        document.querySelector('.happy').style.display = 'block';
        clearInterval(interval);
    }
    const day = Math.floor(remainder / DAY);
    remainder = remainder % DAY;
    const hour = Math.floor(remainder / HOUR);
    remainder = remainder % HOUR;
    const min = Math.floor(remainder / MIN);
    remainder = remainder % MIN;
    const sec = remainder;
    
    updateUi([day, hour, min, sec]);
}, 1000)

const timeUi = document.querySelectorAll('.time > div > div'); 

const updateUi = (values) => {
    timeUi.forEach((item, index) => {
        if(item.children[0].textContent===values[index].toString()) 
            return;
        item.children[0].className = 'up'; 
        const span = document.createElement('span');
        span.textContent = values[index];
        span.className = 'down';
        item.appendChild(span);
        setTimeout(() => {
            item.children[1].className = '';
            item.children[0].remove();
        }, 200)
    })
}

style.scss

body { 
    display: flex; justify-content: center; align-items: center;  flex-direction: column;
    height: 100vh; margin: 0; direction: ltr; background-color: #f4f4f4;
    direction: rtl; 
    * { font-family: 'SahelF'; }
} 

.new-year-card {
    width: 600px; height: 500px; border-radius: 20px;
    display: flex; justify-content: center; align-items: center;
    background-image: url('https://drive.google.com/uc?export=open&id=1wlR2I2ZFxLZYJKPcFnilohNlWCzN5_wt');
    background-size: cover; position: relative; overflow: hidden;
    &::before { content: ''; position: absolute; 
        left: 0; top: 0; right: 0; bottom: 0;
        background: linear-gradient(180deg, 
            rgba(3, 201, 92, 0.3) 0%, rgba(173,36,252,0.34) 100%); }
    & > * { z-index: 1; }
    .happy { display: none; }
}
.remainder {
    letter-spacing:-1px;
    h1 { font-size: 36px; } p { font-size: 20px; }
}
.remainder .time > div {
    display: inline-block; font-size: 20px; margin-left: 5px;
    & > * { vertical-align: middle; }
    div { 
        display: inline-flex; justify-content: center; align-items: center;
        width: 50px; height: 50px; margin-left: 5px; border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.801); }
    div span { position: absolute; 
        font-size: 25px; transition: all .6s; 
        &.up   { transform: translateY(-30px); opacity: 0; }
        &.down { transform: translateY(30px); opacity: 0; }
    }    
}