پرش به محتوا

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

از ویکی امام رضا علیه السلام
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
خط ۴: خط ۴:
     <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 {
             font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background-color: #f8f9fa;
             background-color: #f5f5f5;
            color: #222;
            line-height: 1.6;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
       
        .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;
            border: 1px solid #a2a9b1;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
       
        .usage-title {
            font-size: 1.5em;
            color: #0645ad;
            border-bottom: 2px solid #eaecf0;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
       
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #eaecf0;
            padding: 15px;
            border-radius: 3px;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            overflow-x: auto;
            margin: 15px 0;
        }
       
        .example-box {
             display: flex;
             display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
             justify-content: center;
             justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 20px;
         }
         }
          
          
         .counter-box {
         .شمارشی {
             width: 200px;
             width: 200px;
             height: 200px;
             height: 200px;
خط ۷۳: خط ۲۸:
             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: 10px;
             padding: 15px;
            text-align: center;
         }
         }
          
          
         .counter-icon {
         .شمارشی-آیکن {
             font-size: 48px;
             font-size: 48px;
            margin-bottom: 10px;
             color: #3498db;
             color: #3498db;
         }
         }
          
          
         .counter-title {
         .شمارشی-عنوان {
             font-size: 18px;
             font-size: 18px;
             margin: 10px 0;
             margin: 5px 0;
             color: #2c3e50;
             color: #2c3e50;
         }
         }
          
          
         .counter-number {
         .شمارشی-عدد {
             font-size: 24px;
             font-size: 24px;
             font-weight: bold;
             font-weight: bold;
             color: #e74c3c;
             color: #e74c3c;
             margin-top: 5px;
             margin-top: 10px;
        }
       
        .try-button {
            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;
        }
       
        .note {
            background-color: #eaf3ff;
            border-right: 4px solid #36c;
            padding: 15px;
            margin: 15px 0;
        }
       
        .parameters {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
       
        .parameters th, .parameters td {
            border: 1px solid #a2a9b1;
            padding: 8px 12px;
            text-align: right;
        }
       
        .parameters th {
            background-color: #eaecf0;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <div class="header">
     <!-- این کد را در ویکی خود کپی کنید -->
        <h1>راهنمای استفاده از الگو:شمارشی</h1>
     <div class="شمارشی">
        <p>این راهنما نحوه استفاده از الگوی شمارشی در صفحات مختلف را توضیح می‌دهد</p>
         <div class="شمارشی-آیکن">📚</div>
    </div>
         <div class="شمارشی-عنوان">کتاب خانه</div>
   
         <div class="شمارشی-عدد" id="شمارنده">1</div>
    <div class="usage-section">
        <h2 class="usage-title">نحوه استفاده از الگو</h2>
       
        <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 class="note">
            <strong>توجه:</strong> اگر می‌خواهید چند شمارنده در یک صفحه داشته باشید، باید برای هر کدام یک id منحصر به فرد تعریف کنید.
         </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>
       
        <p>در زیر چند نمونه از استفاده الگوی شمارشی را مشاهده می‌کنید:</p>
       
        <div class="example-box">
            <div class="counter-box">
                <div class="counter-icon">📚</div>
                <div class="counter-title">کتاب خانه</div>
                <div id="counter-1" class="counter-number">1</div>
            </div>
           
            <div class="counter-box">
                <div class="counter-icon">👥</div>
                <div class="counter-title">اعضا</div>
                <div id="counter-2" class="counter-number">1</div>
            </div>
           
            <div class="counter-box">
                <div class="counter-icon">📁</div>
                <div class="counter-title">پرونده‌ها</div>
                <div id="counter-3" class="counter-number">1</div>
            </div>
         </div>
       
        <button class="try-button" onclick="startAllCounters()">شروع همه شمارنده‌ها</button>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">استفاده پیشرفته</h2>
       
        <p>برای تنظیمات پیشرفته‌تر، می‌توانید از پارامترهای مختلف استفاده کنید:</p>
       
        <div class="code-block">
&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;
        </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>
       
        <button class="try-button" onclick="startCustomCounter()">شروع شمارنده سفارشی</button>
     </div>
     </div>


     <script>
     <script>
         // شمارنده اول
         // شمارنده از 1 تا 199
        function startCounter1() {
         let شمارنده = 1;
            let count = 1;
        const عنصرشمارنده = document.getElementById('شمارنده');
            const counterElement = document.getElementById('counter-1');
        const بازه = setInterval(() => {
            const interval = setInterval(() => {
             شمارنده++;
                count++;
            عنصرشمارنده.textContent = شمارنده;
                counterElement.textContent = count;
             if(شمارنده >= 199) clearInterval(بازه);
                if(count >= 199) clearInterval(interval);
        }, 100);
            }, 100);
         }
       
        // شمارنده دوم
        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> الگو:شمارشی

📚
کتاب خانه
1

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