پرش به محتوا

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

از ویکی امام رضا علیه السلام
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>الگو:شمارشی</title> <style> body { font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #222; line-height: 1.6; padding: 20px; max...» ایجاد کرد
برچسب: ویرایش مبدأ ۲۰۱۷
 
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>الگو:شمارشی</title>
     <title>راهنمای استفاده از الگو:شمارشی</title>
     <style>
     <style>
         body {
         body {
خط ۱۶: خط ۱۶:
         }
         }
          
          
         .template-container {
         .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
        }
       
        .usage-section {
             background-color: #fff;
             background-color: #fff;
             border: 1px solid #a2a9b1;
             border: 1px solid #a2a9b1;
خط ۲۵: خط ۳۴:
         }
         }
          
          
         .template-title {
         .usage-title {
             font-size: 1.8em;
             font-size: 1.5em;
             border-bottom: 1px solid #a2a9b1;
            color: #0645ad;
             border-bottom: 2px solid #eaecf0;
             padding-bottom: 10px;
             padding-bottom: 10px;
             margin-bottom: 20px;
             margin-bottom: 20px;
            color: #0645ad;
         }
         }
          
          
         .template-info {
         .code-block {
             background-color: #f8f9fa;
             background-color: #f8f9fa;
             border: 1px solid #eaecf0;
             border: 1px solid #eaecf0;
             padding: 15px;
             padding: 15px;
            border-radius: 3px;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            overflow-x: auto;
             margin: 15px 0;
             margin: 15px 0;
            border-radius: 3px;
            font-size: 0.95em;
         }
         }
          
          
         .template-usage {
         .example-box {
             background-color: #eaf3ff;
             display: flex;
             border: 1px dashed #36c;
             flex-wrap: wrap;
             padding: 15px;
             gap: 20px;
             margin: 15px 0;
             margin: 20px 0;
             border-radius: 3px;
             justify-content: center;
            font-family: monospace;
            white-space: pre-wrap;
         }
         }
          
          
خط ۶۱: خط ۷۱:
             justify-content: center;
             justify-content: center;
             align-items: center;
             align-items: center;
            font-family: Arial, sans-serif;
             background: #f8f9fa;
             background: #f8f9fa;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             margin: 20px auto;
             margin: 10px;
         }
         }
          
          
خط ۸۵: خط ۹۴:
         }
         }
          
          
         .documentation {
         .try-button {
             margin-top: 30px;
            display: inline-block;
            background-color: #3366cc;
            color: white;
            padding: 10px 15px;
            border-radius: 4px;
            text-decoration: none;
             margin: 10px 0;
            cursor: pointer;
            border: none;
            font-family: inherit;
        }
       
        .try-button:hover {
            background-color: #447ff5;
         }
         }
          
          
         .documentation h3 {
         .note {
             color: #54595d;
             background-color: #eaf3ff;
             border-bottom: 1px solid #eaecf0;
             border-right: 4px solid #36c;
             padding-bottom: 5px;
             padding: 15px;
            margin: 15px 0;
         }
         }
          
          
خط ۱۰۹: خط ۱۳۲:
         .parameters th {
         .parameters th {
             background-color: #eaecf0;
             background-color: #eaecf0;
        }
       
        .code-example {
            background-color: #f8f9fa;
            border: 1px solid #eaecf0;
            padding: 15px;
            border-radius: 3px;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            overflow-x: auto;
        }
       
        .try-button {
            display: inline-block;
            background-color: #3366cc;
            color: white;
            padding: 10px 15px;
            border-radius: 4px;
            text-decoration: none;
            margin: 10px 0;
            cursor: pointer;
        }
       
        .try-button:hover {
            background-color: #447ff5;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <div class="template-container">
     <div class="header">
         <h1 class="template-title">الگو:شمارشی</h1>
        <h1>راهنمای استفاده از الگو:شمارشی</h1>
        <p>این راهنما نحوه استفاده از الگوی شمارشی در صفحات مختلف را توضیح می‌دهد</p>
    </div>
   
    <div class="usage-section">
         <h2 class="usage-title">نحوه استفاده از الگو</h2>
          
          
         <div class="template-info">
        <p>برای استفاده از الگوی شمارشی در هر صفحه، کافی است کد زیر را در محل مورد نظر قرار دهید:</p>
            این الگو برای نمایش یک کادر با آیکون، عنوان و شمارنده استفاده می‌شود.
       
         <div class="code-block">
&lt;div class="counter-box"&gt;
  &lt;div class="counter-icon"&gt;📚&lt;/div&gt;
  &lt;div class="counter-title"&gt;کتاب خانه&lt;/div&gt;
  &lt;div id="counter-1" class="counter-number"&gt;1&lt;/div&gt;
&lt;/div&gt;
 
&lt;script&gt;
  // شمارنده اول
  let count1 = 1;
  const counterElement1 = document.getElementById('counter-1');
  const interval1 = setInterval(() => {
    count1++;
    counterElement1.textContent = count1;
    if(count1 >= 199) clearInterval(interval1);
  }, 100);
&lt;/script&gt;
         </div>
         </div>
          
          
         <div class="counter-box">
         <div class="note">
             <div class="counter-icon">📚</div>
             <strong>توجه:</strong> اگر می‌خواهید چند شمارنده در یک صفحه داشته باشید، باید برای هر کدام یک id منحصر به فرد تعریف کنید.
            <div class="counter-title">کتاب خانه</div>
            <div id="counter" class="counter-number">1</div>
         </div>
         </div>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">پارامترهای قابل تنظیم</h2>
       
        <table class="parameters">
            <tr>
                <th>پارامتر</th>
                <th>توضیح</th>
                <th>مقدار پیش‌فرض</th>
            </tr>
            <tr>
                <td>عنوان</td>
                <td>متن نمایش داده شده زیر آیکون</td>
                <td>کتاب خانه</td>
            </tr>
            <tr>
                <td>آیکون</td>
                <td>آیکون یا ایموجی نمایش داده شده</td>
                <td>📚</td>
            </tr>
            <tr>
                <td>شروع</td>
                <td>عدد شروع شمارنده</td>
                <td>1</td>
            </tr>
            <tr>
                <td>پایان</td>
                <td>عدد پایان شمارنده</td>
                <td>199</td>
            </tr>
            <tr>
                <td>سرعت</td>
                <td>سرعت شمارش (میلی‌ثانیه)</td>
                <td>100</td>
            </tr>
        </table>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">نمونه‌های عملی</h2>
          
          
         <div class="template-usage">{{شمارشی
         <p>در زیر چند نمونه از استفاده الگوی شمارشی را مشاهده می‌کنید:</p>
  | عنوان    = کتاب خانه
  | آیکون    = 📚
  | شروع    = 1
  | پایان    = 199
  | سرعت    = 100
}}</div>
          
          
         <div class="documentation">
         <div class="example-box">
             <h3>پارامترها</h3>
             <div class="counter-box">
                <div class="counter-icon">📚</div>
                <div class="counter-title">کتاب خانه</div>
                <div id="counter-1" class="counter-number">1</div>
            </div>
              
              
             <table class="parameters">
             <div class="counter-box">
                 <tr>
                 <div class="counter-icon">👥</div>
                    <th>پارامتر</th>
                 <div class="counter-title">اعضا</div>
                    <th>توضیح</th>
                 <div id="counter-2" class="counter-number">1</div>
                    <th>پیش‌فرض</th>
             </div>
                    <th>ضروری</th>
                 </tr>
                <tr>
                    <td>عنوان</td>
                    <td>متنی که زیر آیکون نمایش داده می‌شود</td>
                    <td>کتاب خانه</td>
                    <td>خیر</td>
                 </tr>
                <tr>
                    <td>آیکون</td>
                    <td>آیکون یا ایموجی که نمایش داده می‌شود</td>
                    <td>📚</td>
                    <td>خیر</td>
                </tr>
                <tr>
                    <td>شروع</td>
                    <td>عدد شروع شمارنده</td>
                    <td>1</td>
                    <td>خیر</td>
                </tr>
                <tr>
                    <td>پایان</td>
                    <td>عدد پایان شمارنده</td>
                    <td>199</td>
                    <td>خیر</td>
                </tr>
                <tr>
                    <td>سرعت</td>
                    <td>سرعت شمارش به میلی‌ثانیه (اعداد کمتر = سرعت بیشتر)</td>
                    <td>100</td>
                    <td>خیر</td>
                </tr>
             </table>
              
              
             <h3>نمونه استفاده</h3>
             <div class="counter-box">
           
                <div class="counter-icon">📁</div>
            <div class="code-example">
                <div class="counter-title">پرونده‌ها</div>
&lt;div class="counter-box"&gt;<br>
                <div id="counter-3" class="counter-number">1</div>
   &lt;div class="counter-icon"&gt;📚&lt;/div&gt;<br>
            </div>
   &lt;div class="counter-title"&gt;کتاب خانه&lt;/div&gt;<br>
        </div>
   &lt;div id="counter" class="counter-number"&gt;1&lt;/div&gt;<br>
       
&lt;/div&gt;<br>
        <button class="try-button" onclick="startAllCounters()">شروع همه شمارنده‌ها</button>
<br>
    </div>
&lt;script&gt;<br>
   
   let count = 1;<br>
    <div class="usage-section">
   const counterElement = document.getElementById('counter');<br>
        <h2 class="usage-title">استفاده پیشرفته</h2>
   const interval = setInterval(() => {<br>
       
     count++;<br>
        <p>برای تنظیمات پیشرفته‌تر، می‌توانید از پارامترهای مختلف استفاده کنید:</p>
     counterElement.textContent = count;<br>
       
     if(count >= 199) clearInterval(interval);<br>
        <div class="code-block">
   }, 100);<br>
&lt;div class="counter-box" style="width: 180px; height: 180px; border-color: #e74c3c;"&gt;
   &lt;div class="counter-icon" style="font-size: 40px; color: #e74c3c;"&gt;⭐&lt;/div&gt;
   &lt;div class="counter-title" style="font-size: 16px; color: #7f8c8d;"&gt;امتیاز&lt;/div&gt;
   &lt;div id="counter-4" class="counter-number" style="font-size: 28px; color: #27ae60;"&gt;1&lt;/div&gt;
&lt;/div&gt;
 
&lt;script&gt;
  // شمارنده با تنظیمات سفارشی
   let count4 = 1;
   const counterElement4 = document.getElementById('counter-4');
   const interval4 = setInterval(() => {
     count4++;
     counterElement4.textContent = count4;
     if(count4 >= 150) clearInterval(interval4);
   }, 50); // سرعت بیشتر
&lt;/script&gt;
&lt;/script&gt;
        </div>
       
        <div class="example-box">
            <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>
             </div>
           
            <a class="try-button" onclick="startCounter()">اجرای شمارنده</a>
         </div>
         </div>
       
        <button class="try-button" onclick="startCustomCounter()">شروع شمارنده سفارشی</button>
     </div>
     </div>


     <script>
     <script>
         function startCounter() {
        // شمارنده اول
         function startCounter1() {
             let count = 1;
             let count = 1;
             const counterElement = document.getElementById('counter');
             const counterElement = document.getElementById('counter-1');
             const interval = setInterval(() => {
             const interval = setInterval(() => {
                 count++;
                 count++;
خط ۲۳۷: خط ۲۸۲:
         }
         }
          
          
         // شروع خودکار شمارنده هنگام بارگذاری صفحه
        // شمارنده دوم
         window.onload = startCounter;
        function startCounter2() {
            let count = 1;
            const counterElement = document.getElementById('counter-2');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 125) clearInterval(interval);
            }, 150);
        }
       
        // شمارنده سوم
        function startCounter3() {
            let count = 1;
            const counterElement = document.getElementById('counter-3');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 175) clearInterval(interval);
            }, 120);
        }
       
        // شمارنده سفارشی
        function startCustomCounter() {
            let count = 1;
            const counterElement = document.getElementById('counter-4');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 150) clearInterval(interval);
            }, 50);
        }
       
        // شروع همه شمارنده‌ها
        function startAllCounters() {
            startCounter1();
            startCounter2();
            startCounter3();
        }
       
         // شروع خودکار شمارنده‌ها هنگام بارگذاری صفحه
         window.onload = function() {
            // به طور پیشفرض، شمارنده‌ها به صورت خودکار شروع نمی‌شوند
            // کاربر باید دکمه شروع را فشار دهد
        };
     </script>
     </script>
</body>
</body>
</html>
</html>

نسخهٔ ‏۶ سپتامبر ۲۰۲۵، ساعت ۲۰:۳۶

<!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

برگرفته از «http://zooha.ir/admin/index.php?title=الگو:کادر-شمارنده&oldid=3344»