الگو:کادر-شمارنده

<!DOCTYPE html> راهنمای استفاده از الگو:شمارشی

نحوه استفاده از الگو

برای استفاده از الگوی شمارشی در هر صفحه، کافی است کد زیر را در محل مورد نظر قرار دهید:

<div class="counter-box">
  <div class="counter-icon">📚</div>
  <div class="counter-title">کتاب خانه</div>
  <div id="counter-1" class="counter-number">1</div>
</div>

<script>
  // شمارنده اول
  let count1 = 1;
  const counterElement1 = document.getElementById('counter-1');
  const interval1 = setInterval(() => {
    count1++;
    counterElement1.textContent = count1;
    if(count1 >= 199) clearInterval(interval1);
  }, 100);
</script>
        

توجه: اگر می‌خواهید چند شمارنده در یک صفحه داشته باشید، باید برای هر کدام یک id منحصر به فرد تعریف کنید.

پارامترهای قابل تنظیم

پارامتر	توضیح	مقدار پیش‌فرض
عنوان	متن نمایش داده شده زیر آیکون	کتاب خانه
آیکون	آیکون یا ایموجی نمایش داده شده	📚
شروع	عدد شروع شمارنده	1
پایان	عدد پایان شمارنده	199
سرعت	سرعت شمارش (میلی‌ثانیه)	100

نمونه‌های عملی

در زیر چند نمونه از استفاده الگوی شمارشی را مشاهده می‌کنید:

📚

کتاب خانه

1

👥

اعضا

1

📁

پرونده‌ها

1

استفاده پیشرفته

برای تنظیمات پیشرفته‌تر، می‌توانید از پارامترهای مختلف استفاده کنید:

<div class="counter-box" style="width: 180px; height: 180px; border-color: #e74c3c;">
  <div class="counter-icon" style="font-size: 40px; color: #e74c3c;">⭐</div>
  <div class="counter-title" style="font-size: 16px; color: #7f8c8d;">امتیاز</div>
  <div id="counter-4" class="counter-number" style="font-size: 28px; color: #27ae60;">1</div>
</div>

<script>
  // شمارنده با تنظیمات سفارشی
  let count4 = 1;
  const counterElement4 = document.getElementById('counter-4');
  const interval4 = setInterval(() => {
    count4++;
    counterElement4.textContent = count4;
    if(count4 >= 150) clearInterval(interval4);
  }, 50); // سرعت بیشتر
</script>
        

⭐

امتیاز

1