تایمر در بلوک ها

[MAMADBAX]

سلام

یه پلاگینی چیزی میخوام که مثلا یه تایمر برای یه رویداد خاص رو توی بلوک نمایش بده:

مثال:

[Arash.Ranjbar]

سلام. 

پلاگینی برای این مورد نیست مگه اینکه با کدنویسی این قابلیت رو اضافه کنین. 

در ضمن اگه برنامه تقویم رو فعال کرده باشین میتونین با اضافه کردن رویداد تا حدودی این قابلیت رو داشته باشین

[Arash.Ranjbar]

فرصت کنم کدشو با جاوااسکریپت مینویسم اینجا قرار میدم.

[Arash.Ranjbar]

اینم یه نمونه شمارش معکوس ساده که میتونین هرجای انجمن که خواستین استفاده کنین

کد html:

<div class="timer">
  <h3 id="headline">زمان باقی مانده تا رویداد</h3>
  <div id="countdown">
    <ul>
 <li class="d"><span class="da" id="days"></span>روز</li>
 <li class="h"><span class="ho" id="hours"></span>ساعت</li>
 <li class="m"><span class="mi" id="minutes"></span>دقیقه</li>
 <li class="s"><span class="se" id="seconds"></span>ثانیه</li>
    </ul>
  </div>
</div>

کد js:

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let birthday = "Sep 30, 2021 00:00:00",
      countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //پیام بعد از اتمام شمارش معکوس
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

          headline.innerText = "رویداد شروع شده!";
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
        //ثانیه
      }, 0)
  }());

در کد بالا میتونین بجای تاریخ Sep 30, 2021 00:00:00 تاریخ مورد نظرتون رو قرار بدین. فقط دقت کنین که فرمت رو دقیق وارد کنین و تغییرش ندین

کد css:

.timer {
  color: #333;
  margin: 0 auto;
  text-align: center;
  direction: ltr;
}
.d, .s, .h, .m {
  display: inline-block;
  font-size: 18px;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}
.da, .se, .ho, .mi {
  display: block;
  font-size: 18px;
}
@media all and (max-width: 768px) {
      .d, .s, .h, .m {
    font-size: 1.125rem;
    padding: .75rem;
  }
   .da, .se, .ho, .mi {
    font-size: 3.375rem;
  }
}