تایمرها یکی از عناصری هستند که گاهی اوقات در برخی از پروژه ها موردنیاز قرار میگیرند. مانند طرح صفحات “در دست تعمیر” یا بخش مربوط به تخفیف ها و تایمر زمان باقی مانده تا آغاز یک ایونت و رویداد. برای داشتن چنین تایمرهایی چندین حالت وجود دارد. در این تاپیک از انجمن بی تاک قصد داریم برخی از انواع این کدها را برایتان به اشتراک بگذاریم که بتوانید توسط آن یک تایمر شمارش معکوس داشته باشید. حالت اول یک شمارش معکوس ثابت است که با هر بار تازه سازی صفحه، تایمر از اول شروع به کار می کند و در حالت بعدی شما باید یک تاریخ مشخص وارد کنید تا مدت زمان باقی مانده تا آن تاریخ و زمان بر اساس تاریخ فعلی کاربر محاسبه شده و نمایش داده شود.
حالت اول: ریستارت تایمر با رفرش
در حالت اول که حالت پیش فرض این کد هم می توان نام برد، شما یک زمان بندی ثابت در نظر می گیرد و هر بار که کاربری آن صفحه را اجرا کرد، شمارش از ابتدا شروع خواهد شد. برای مثال شما تایمر را 5 دقیقه در نظر میگیرد و هر بار این تایمر از همان دقیقه 5 شروع به کم شدن می کند. برای اینکار ابتدا این کد را در یک فایل جاوا اسکریپت در سایتتان قرار دهید:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
در کد بالا باید در انتهای کد و در خط var fiveMinutes = 60 * 5, بجای عدد 5 دقیقه موردنظر را وارد کنید. در اینجا شمارش به گونه ای تنظیم شده که از دقیقه 5 شروع شود و کم شود.
در نهایت این کد را در کدهای قالبتان قرار دهید که قصد دارید تایمر را در آنجا نمایش دهید:
<div>فقط <span id="time">06:00</span> تا شروع مسابقه فرصت است</div>
حالت دوم: زمان باقی مانده تا یک تاریخ و ساعت مشخص
حالت دوم بیشتر برای صفحات در دست تعمیر و به زودی کاربرد دارد. در این حالت شما یک تاریخ و زمان دقیق را داخل کد تعریف می کنید و جاوا اسکریپت به طور خودکار زمان و تاریخ فعلی را بررسی کرده و مدت زمان باقی مانده تا آن زمان تعریف شده را محاسبه می کند و به کاربر نمایش می دهد. برای شروع این کد را در یک فایل جاوا اسکریپت قرار دهید:
// تاریخ و زمان هدف
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// تعریف تگ اچ تی ام ال برای درج زمان و عبارات
document.getElementById("betalktimer").innerHTML = days + " روز " + hours + " ساعت "
+ minutes + " دقیقه " + seconds + " ثانیه";
// متن نمایشی برای زمانی که تاریخ فعلی کاربر از تاریخ تعیین شده در کد بیشتر بود
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "تاریخ به اتمام رسیده است";
}
}, 1000);
- در کد بالا در خط
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime(); در قسمت Jan 5, 2024 15:37:25 به همین فرمتی که تعیین شده تاریخ و زمان را وارد کنید.
- در قسمت
document.getElementById("betalktimer") بجای عبارت betalktimerباید آی دی تگ HTML را وارد کنید که تایمر در آن نمایش داده شود.
و برای اجرا کردن کد بالا در سایت، کافیست کد زیر را در مکانی از قالب که قصد دارید این تایمر نمایش داده شود قرار دهید:
<p id="betalktimer"></p>
