Arnold
9 ماه پیش توسط 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 گذاشتم ..


ثبت پرسش جدید

به همدیگه کمک کنیم

به Arnold کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام