انجمن پشتیبانی فارسی IPS

انجمن پشتیبانی فارسی IPS

رفتن به مطلب

هر آن چیزی که برای نیاز دارید


داشتن انجمن دیگر یک رویا نیست...!

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


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

سلام

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

مثال:

374812182_Screenshot_-_Chrome.thumb.png.c07912bd98b655f17c0c8cad96e3de70.png

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

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

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

روزهای محبوب

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

سلام. 

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

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

  • پسند 1

IPSforum.ir  arash-sn.png

 

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

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

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

IPSforum.ir  arash-sn.png

 

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

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

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

کد 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  arash-sn.png

 

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

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

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

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

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

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

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

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

ورود به حساب کاربری
 اشتراک گذاری

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

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

اطلاعات مهم

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