رفتن به مطلب
کاربرانی که بیشتر از یک حساب کاربری میسازند خودکار بن خواهند شد ×

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


پست های پیشنهاد شده

  • تعداد پاسخ 3
  • زمان ایجاد
  • آخرین پاسخ

بهترین ارسال کنندگان این موضوع

روزهای محبوب

  • مدیر کل | موسس سایت

سلام. 

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

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

  • پسند 1

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

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

کد 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;
  }
}

 

IPSforum.ir  astrocat.webp

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • ایجاد مورد جدید...

اطلاعات مهم

برای تجربه رابط کاربری بهتر و تعامل بهتر شما با انجمن ما از کوکی ها استفاده میکنیم قوانین