رفتن به مطلب
رونمایی از اولین و قویترین قالب IPS در ایران و در مارکتهای جهانی ×

test title

Please upload image with appropriate resolution.

 

 



More

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



More

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



More

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



More

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


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

سلام

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

مثال:

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

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

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

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

روزهای محبوب

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

سلام. 

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

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

IPSforum.ir  astrocat.webp

 

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

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

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

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 کاربر

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

اطلاعات مهم

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