a post, no question
سلام دوستان ایندفعه میخوام یه پلاگین بزارم برای بعضیا شاید بدردشون بخوره.
نسخه کم حجم شده
//Author : Ali // Timer Plugin
var time;var inte= [];var timer= document.getElementsByClassName('Timer');var sec= document.getElementsByClassName('second');var min= document.getElementsByClassName('minute');var hou= document.getElementsByClassName('hour');var day= document.getElementsByClassName('day');function func(){for (time= 0; time < timer.length; time++){if(inte[time]=== undefined){inte[time]= 0;}if(inte[time]=== 1){continue;}if(sec[time].innerHTML >= 60){sec[time].innerHTML= 59;}if(min[time].innerHTML >= 60){min[time].innerHTML= 59;}if(hou[time].innerHTML >= 24){hou[time].innerHTML= 23;}if(sec[time].innerHTML=== ''){sec[time].innerHTML= 0;}if(min[time].innerHTML=== ''){min[time].innerHTML= 0;}if(hou[time].innerHTML=== ''){hou[time].innerHTML= 0;}if(day[time].innerHTML=== ''){day[time].innerHTML= 0;}if(sec[time].innerHTML >= 0){sec[time].innerHTML= sec[time].innerHTML - 1;}if(sec[time].innerHTML <= -1){sec[time].innerHTML= 59;min[time].innerHTML= min[time].innerHTML - 1;}if(min[time].innerHTML <= -1){min[time].innerHTML= 59;hou[time].innerHTML= hou[time].innerHTML - 1;}if(hou[time].innerHTML <= -1){hou[time].innerHTML= 23;day[time].innerHTML= day[time].innerHTML - 1;}if(day[time].innerHTML <= 0 && hou[time].innerHTML <= 0 && min[time].innerHTML <= 0 && sec[time].innerHTML <= 0){inte[time]= 1;}}}for (time= 0; time < timer.length; time++){if(sec[time].innerHTML >= 60){sec[time].innerHTML= 59;}if(min[time].innerHTML >= 60){min[time].innerHTML= 59;}if(hou[time].innerHTML >= 24){hou[time].innerHTML= 23;}if(sec[time].innerHTML=== ''){sec[time].innerHTML= 0;}if(min[time].innerHTML=== ''){min[time].innerHTML= 0;}if(hou[time].innerHTML=== ''){hou[time].innerHTML= 0;}if(day[time].innerHTML=== ''){day[time].innerHTML= 0;}}setInterval(func,1000);
// / Timer Plugin
طرز کارکردش هم خوبه اینجوریه که
<div class="Timer">
<span class="second"></span>
<span class="minute">1</span>
<span class="hour"></span>
<span class="day"></span>
</div>
<!--با نام همراه-->
<div class="Timer">
ثانیه
<span class="second"></span>
دقیقه
<span class="minute"></span>
ساعت
<span class="hour"></span>
روز
<span class="day"></span>
</div>
همینطور هم که نیازمنده به یه css کوتاه
.Timer {
display:flex;
flex-wrap:nowrap;
}
.Timer > *::after{
content: ":";
padding: 0 7px;
}
.Timer > *:last-child::after{
content: "";
display: none;
}
یه توضیحات کلی که اگر تگ اسپن رو به تگ دایو یا امثال اینها تغییر بدید به مشکل نمیخورید ^^
اگر داخل تگ اسپن خالی بزارید بطور پیشفرض تبدیل به صفر میشود و نیاز نیست شما صفر بزارید ^^
اگر عدد ثانیه و دقیقه و ساعت رو به جزء روز بیشتر از حداکثر (حداکثر یعنی ساعت تا 23 و مابقی 59) بزارید پیشفرض عدد به حداکثر تنظیم میشه و روز رو میتوانید به هر عدد که خواستید بزارید که اینم خوبه ^^
لازم هست بگم این تایمر زمانش داخل جاوااسکریپت نیست و داخل خود html گذاشته میشود (داخل خود تگ اسپن عدد گذاری میشود مثل مثال کد html بالا ) و با استفاده از کلاس هستش که یعنی میتوانید بینهایت تایمر با اعداد مختلف بسازید ^^
نیاز به هیچ کتابخانه ندارد و با کتابخانه ها مشکلی هم ندارد ^^
شاید دفعه بعد یه پلاگین Lazy Loading گذاشتم ..
به Arnold کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟