صبح نجف

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

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<!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>
برگرفته از «http://zooha.ir/الگو:کادر-شمارنده»