تایمر شمارش معکوس می‌تواند برای اهداف مختلفی استفاده شود. این تایمر به کاربر اطلاع می‌دهد که چقدر از زمان انجام یک کار گذشته و یا اینکه تا یک رخداد خاص، مثلاً شروع وب‌سایت جدید، چقدر زمان باقی مانده است. در زمینه فروش و بازاریابی، چنین چیزی می‌تواند گفتگو و بحث را در رابطه با موضوع تقویت کند.
در این آموزش، می‌خواهیم نحوه ساخت یک تایمر شمارش معکوس را در جاوا اسکریپت بررسی کنیم.
پیش‌نیازها
برای تکمیل این آموزش به موارد زیر احتیاج خواهید داشت.
- آخرین نسخه Node که در سیستم شما نصب شده باشد. برای نصب Node، حتماً به آموزش‌های موجود در این زمینه مراجعه کنید.
- درک پایه کدنویسی در جاوا اسکریپت
گام ۱) شروع به کار
از آنجایی که در ابتدایی‌ترین شکل ممکن از جاوا اسکریپت استفاده می‌کنید، نیاز به عملیات پیچیده برای شروع به کار نخواهد بود. برای این منظور، یک فایل index.html همراه با کد ساده شروع HTML ایجاد کنید.
<!DOCTYPE html> <html> <body> </body> </html>
یک تگ <div> درون <body> ایجاد کنید. شناسه این <div> باید برابر “countdown” تنظیم شود.
<!DOCTYPE html> <html> <body> <div id="countdown"></div> </body> </html>
بعداً تایمر شمارش معکوس جاوا اسکریپت درون این <div> قرار خواهد گرفت. در زیر این <div>، تگ‌های <script> را تایپ می‌کنید. این تگ‌ها دربرگیرنده کد‌های جاوا اسکریپت شما خواهند بود.
<!DOCTYPE html> <html> <body> <div id="countdown"></div> <script> </script> </body> </html>
با تنظیم فایل اچتمل، برای کدنویسی تایمر شمارش معکوس با جاوا اسکریپت آماده خواهید بود. در مرحله بعد، زمان باقیمانده را برای شمارش معکوس محاسبه خواهیم کرد.
گام ۲) محاسبه زمان باقیمانده
قبل از محاسبه زمانی که باقیمانده، باید یک تابع با نام countdownTimer ایجاد کنیم.
<!DOCTYPE html>
<html>
<body>
<div id="countdown"></div>
<script>
function countdownTimer() {
}
</script>
</body>
</html>
برای محاسبه زمان باقیمانده، نیاز به پیدا کردن تفاوت زمانی بین زمان کنونی و زمانی که شمارش معکوس به انقضا می‌رسد، خواهید داشت. درون تابع countdownTimer، یک متغیر ثابت با نام difference ایجاد کنید. در نمونه کدی که در پایین آمده، «تفاوت» برابر اختلاف بین روز سال نو ۲۰۲۱ و تاریخ کنونی است.
function countdownTimer() {
const difference = +new Date("2021-01-01") - +new Date();
}
new Date یک آبجکت تاریخ ایجاد می‌کند. علامت + قبل از new Date به عنوان علامت اختصاری در جاوا اسکریپت برای پردازش آبجکت به صورت عدد صحیح است. این موضوع باعث می‌شود که آبجت از زمان شروع، بر حسب میلی‌ثانیه عمل کند.
در زیر متغیر difference، یک متغیر دیگر با نام remaining ایجاد کنید. remaining برابر پیام مهلت زمانی یا “Time’s up!” تنظیم می‌شود.
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
}
وقتی زمان شما به پایان رسید و تایمر شمارش معکوس خاتمه یافت، پیام remaining به نمایش درمی‌آید.
اکنون زمان باقیمانده تایمر شمارش معکوس تنظیم شده است. زمان باقیمانده (difference) به میلی‌ثانیه محاسبه می‌شود. بر این اساس، باید فرمت زمان باقیمانده را به روز، ساعت، دقیقه و ثانیه برگردانید.
گام ۳) قالب‌بندی روز، ساعت، دقیقه و ثانیه
با داشتن زمان کلی انقضای شمارش معکوس به میلی‌ثانیه، باید قالب آن را به گونه‌ای تغییر دهید که برای همگان قالب فهم باشد. قبل از این کار، باید یک عبارت if ایجاد کنید.
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
}
}
در صورتی که difference بزرگتر از صفر باشد (اولین روز سال نو نباشد)، کد در ادامه محاسبه می‌شود.
حالا می‌توانید میلی‌ثانیه‌ها را به روز، ساعت، دقیقه و ثانیه برگردانید. برای این منظور، نیاز به برخی تقسیم‌بندی‌ها، ضرب‌ها و استفاده از عملگر % دارید.
یک آبجکت با متغیری به نام parts ایجاد کنید. کلیدهای این آبجکت می‌بایست days، hours، minutes و seconds باشند. مقادیر مطابق با این کلیدها باید با معادله‌ای که می‌خواهید میلی‌ثانیه‌ها را به واحد زمانی مناسب تبدیل کنید، هماهنگی داشته باشند. کد نمونه زیر این معادلات را نشان می‌دهد.
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
از تابع Math.floor برای گرد کردن اعداد به سمت پایین استفاده می‌شود. با داشتن این کد، اعداد مناسب برای هر کدام از واحدهای زمانی باقیمانده بدست می‌آیند.
این آبجکت که شامل اعداد روز، ساعت، دقیقه و ثانیه باقیمانده است، باید به قالب رشته‌ای درآید. برای این منظور، دوباره remaining را تعیین کنید و آن را معادل آرایه‌ای از کلیدهای موجود در parts قرار دهید. در اینجا، از روش Object.keys استفاده می‌شود.
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts)
}
حالا remainingبرابر آرایه‌ای از کلیدهای موجود در parts تنظیم شده است. از آنجا که remaining اکنون به صورت یک آرایه است، می‌توانید از روش .map() بهره‌گیری کنید. روش .map() با هر کدام از آیتم‌ها در remaining ارتباط برقرار می‌کند و به شما اجازه می‌دهد که برای هر کدام از آیتم‌ها، یک تابع اجرا نمایید.
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
})
}
در اینجا می‌خواهید هر کدام از آیتم‌ها را به یک رشته تبدیل کنید. هر کدام از واحد‌ها زمانی می‌بایست از فرمت “X days” پیروی کند. part مطابق با واحد زمانی خواهد بود. برای استخراج عدد اصلی، باید از آبجکت parts درون براکت استفاده کنید. در همین حال، یک عبارت if برای بررسی موجود بودن عدد مطابق با واحد زمانی اضافه کنید. در صورتی که عدد وجود نداشته باشد، یک عبارت برگشتی وارد نمایید.
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
})
در صورتی که عدد مطابق با واحد زمانی وجود نداشته باشد، روش .map() به سراغ واحد زمانی بعدی می‌رود و بررسی دوباره انجام می‌دهد.
اگر عدد وجود داشته باشد، عدد را به همراه واحد زمانی برگشت می‌دهد. به خاطر داشته باشید که باید از فرمت “X days” پیروی کند.
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
return `${parts[part]} ${part}`;
})
${parts[part]} موجب برگشت عدد و ${part} واحد زمانی را نتیجه می‌دهد. حالا remaining به صورت آرایه‌ای از روز، ساعت، دقیقه و ثانیه درآمده است. این آرایه باید به صورت یک رشته درآید. هر کدام از آیتم‌های موجود در remaining می‌بایست با یک فاصله از هم جدا شوند. برای انجام این کار از روش .join(” “) استفاده می‌شود.
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
در حال حاضر، تابع countdownTimer() به شکل زیر خواهد بود.
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
}
}
زمان باقیمانده هم‌اکنون به قالب رشته‌ای تبدیل شده و واحد زمانی به صورت قابل‌فهم درآمده‌اند. با این وجود، هنوز این زمان باقیمانده بر روی صفحه شما نشان داده نمی‌شود. برای این منظور، باید از تکنیک DOM استفاده کنید.
گام ۴) نمایش تایمر شمارش معکوس در صفحه
با قرار گرفتن واحدهای زمانی در یک رشته، می‌توانید تگ <div> را برای داشتن این مقدار بروزرسانی کنید. بر این اساس، نیاز به استفاده از تکنیک DOM خواهید داشت.
در تابع countdownTimer() و در زیر عبارت if، از سلکتور یا انتخابگر getElementById DOM استفاده کنید و به <div> با شناسه “countdown” ارجاع دهید.
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
}
document.getElementById("countdown")
}
برای جایگزینی محتویات این <div> به مشخصه .innerHTML همراه با document.getElementById(“countdown”) نیز احتیاج خواهید داشت. این انتخابگر Dom را برابر با remaining قرار دهید.
document.getElementById("countdown").innerHTML = remaining;
حالا تابع countdownTimer() تکمیل شده است. این تابع را برای اجرا فراخوانی کنید.
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
}
document.getElementById("countdown").innerHTML = remaining;
}
countDownTimer();
اکنون تایمر شمارش معکوس شما برای نمایش در صفحه اچتمل آماده شده است. امّا همان‌گونه که احتمالاً تشخیص داده‌اید، زمان در آن بروزرسانی نمی‌شود. هنوز باید برخی کدها برای برزرسانی خودکار تایمر شمارش معکوس اضافه کنیم.
گام ۵) بروزرسانی اتوماتیک تایمر شمارش معکوس
تا به اینجا اختلاف زمانی بین اکنون و زمانی که شمارش معکوس به پایان می‌رسد، محاسبه شده است. شما این زمان را به روز، ساعت، دقیقه و ثانیه تقسیم‌بندی کرده‌اید و سپس بروزرسانی صفحه با افزودن زمان باقیمانده انجام شده است. با این وجود، هنوز تایمر به صورت خودکار بروزرسانی نمی‌شود.
بدون اضافه کردن منطق بروزرسانی در فواصل زمانی مشخص، تایمر شمارش معکوس تا زمانی که صفحه دوباره بارگذاری نشود، عدد خود را حفظ می‌کند. بدون بروزرسانی، نمی‌شود نام آن را یک «تایمر» گذاشت. این موضوع می‌تواند با استفاده از روش setInterval حل شود. با استفاده از متد setInterval، دو پارامتر آن را به صورت countdownTimer و 1000 تنظیم کنید.
countdownTimer(); setInterval(countdownTimer, 1000);
اکنون countdownTimer در هر ثانیه (یا ۱۰۰۰ میلی‌ثانیه) اجرا شده و نمایشگر تایمر شمارش معکوس را بروزرسانی می‌کند.
جمع‌بندی
در این آموزش، یک تایمر شمارش معکوس با استفاده از جاوا اسکریپت ایجاد کردیم. برای این منظور، روش‌هایی مانند .map() و setInterval به کار گرفته شدند. امیدواریم که این کدنویسی شروع مناسبی بوده و برای شما مفید بوده باشد.