|
|
| خط ۱: |
خط ۱: |
| <!DOCTYPE html> | | <includeonly> |
| <html lang="fa" dir="rtl"> | | <div style="width:150px; border:1px solid #ccc; padding:10px; text-align:center; border-radius:8px;"> |
| <head>
| | [[File:{{{icon|Example-icon.png}}}|40px]] |
| <meta charset="UTF-8">
| | <div style="font-weight:bold; margin-top:8px;">{{{title|عنوان پیشفرض}}}</div> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | <div style=" font- size:14px; color:#555;"> {{{count|0}}}</div> |
| <title>الگو:شمارشی</title>
| | </div> |
| <style>
| | </includeonly> |
| body {
| | <noinclude> |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
| | '''نحوه استفاده:''' |
| background-color: #f5f5f5;
| | <pre> |
| display: flex;
| | {{الگوی-کادر |
| justify-content: center;
| | | icon = Example-icon.png |
| align-items: center;
| | | title = تعداد کاربران |
| height: 100vh;
| | | count = ۱۲۳ |
| margin: 0;
| | }} |
| padding: 20px;
| | </pre> |
| }
| | </noinclude> |
|
| |
| .شمارشی {
| |
| width: 200px;
| |
| height: 200px;
| |
| border: 2px solid #3498db;
| |
| border-radius: 10px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| background: #f8f9fa;
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1);
| |
| padding: 15px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .شمارشی-آیکن {
| |
| font-size: 48px;
| |
| margin-bottom: 10px;
| |
| color: #3498db;
| |
| }
| |
|
| |
| .شمارشی-عنوان {
| |
| font-size: 18px;
| |
| margin: 5px 0;
| |
| color: #2c3e50;
| |
| }
| |
|
| |
| .شمارشی-عدد {
| |
| font-size: 24px;
| |
| font-weight: bold;
| |
| color: #e74c3c;
| |
| margin-top: 10px;
| |
| }
| |
| </style>
| |
| </head> | |
| <body>
| |
| <!-- این کد را در ویکی خود کپی کنید -->
| |
| <div class="شمارشی">
| |
| <div class=" شمارشی- آیکن"> 📚</div> | |
| <div class="شمارشی-عنوان">کتاب خانه</div>
| |
| <div class="شمارشی-عدد" id="شمارنده">1</div>
| |
| </div>
| |
| | |
| <script>
| |
| // شمارنده از 1 تا 199
| |
| let شمارنده = 1;
| |
| const عنصرشمارنده = document.getElementById('شمارنده');
| |
| const بازه = setInterval(() => {
| |
| شمارنده++;
| |
| عنصرشمارنده.textContent = شمارنده;
| |
| if(شمارنده >= 199) clearInterval(بازه);
| |
| }, 100);
| |
| </script>
| |
| </body> | |
| </html> | |
نحوه استفاده:
{{الگوی-کادر
| icon = Example-icon.png
| title = تعداد کاربران
| count = ۱۲۳
}}
