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

نسخهٔ کنونی تا ‏۷ سپتامبر ۲۰۲۵، ساعت ۱۳:۲۳

نحوه استفاده:

{{کادر-شمارنده
 | icon     = Icon-book.png
 | iconsize = 70px
 | title    = کتاب‌ها
 | start    = 1
 | end      = 232
 | speed    = 30
 | bgcolor  = #fffbe6
}}

@@ خط ۱: / خط ۱: @@
-<div id="counter" style="font-size:24px; font-weight:bold; text-align:center;"></div>
+<includeonly>
+<div class="counter-box" style="display:inline-block; vertical-align:top; margin:4px; width:130px; border:0px solid #ccc; padding:0em !important; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align:center; border-radius:0px; font-family:Gandom; background-color:{{{bgcolor|#f9f9f9}}}; box-sizing:border-box;">
-<script>
+  <div style="margin-bottom:0px;">
-   let count = 1;
+    [[پرونده:{{{icon|Icon-book.png}}}|{{{iconsize|60px}}}|link=|class=noviewer]]
-  const max = 67;
+  </div>
-   const speed = 50; // سرعت شمارش (میلی‌ثانیه)
+   <div style="font-weight:bold; font-size:16px; margin-bottom:0px;">
+    {{{title|عنوان پیش‌فرض}}}
-   const counterElement = document.getElementById("counter");
+   </div>
+   <div class="animated-counter"
-  const interval = setInterval(() => {
+       data-start="{{{start|1}}}"
-    counterElement.textContent = count;
+       data-end="{{{end|100}}}"
-     count++;
+       data-speed="{{{speed|30}}}"
-    if (count > max) {
+       style="font-size:16px; color:#333;">
-      clearInterval(interval);
+     {{{start|1}}}
-    }
+  </div>
-  }, speed);
+</div>
-</script>
+</includeonly>
+<noinclude>
+'''نحوه استفاده:'''
+<pre>
+{{کادر-شمارنده
+ | icon     = Icon-book.png
+ | iconsize = 70px
+ | title    = کتاب‌ها
+ | start    = 1
+ | end      = 232
+ | speed    = 30
+ | bgcolor  = #fffbe6
+}}
+</pre>
+</noinclude>