Arnold
2 سال پیش توسط Arnold مطرح شد
0 پاسخ

پلاگین تایمر هوشمند بدون وابستگی

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 گذاشتم ..