ساخت تایمر با جاوا اسکریپت – از صفر تا صد + کد

در دنیای دیجیتال پرسرعت امروز، تایمرها به بخشی جدایی‌ناپذیر از توسعه وب تبدیل شده‌اند. کاربران چه در حال ساختن ابزارهای شمارش معکوس برای رویدادی خاص، ایجاد کرونومتر برای ردیابی زمان یا گنجاندن فواصل زمان بندی شده در برنامه‌های خود باشند، جاوا اسکریپت مجموعه ابزار قدرتمند و همه کاره را برای تحقق آن فراهم می‌کند. زبان برنامه نویسی جاوا اسکریپت با طیف گسترده‌ای از عملکردها و سهولت استفاده، به توسعه‌دهندگان این امکان را می‌دهد که تایمرهای پویا و تعاملی ایجاد کنند که به بهبود تجربه کاربری کمک می‌کند. در این مطلب آموزشی از «مجله فرادرس» اصول و نحوه ساخت تایمر با جاوا اسکریپت را در قالب مثالی عملی بررسی خواهیم کرد.

ساخت تایمر با جاوا اسکریپت

تایمر شمارش معکوس ابزاری ارزشمند در صفحات وب برای نشان دادن شروع یا پایان رویدادها است. اهداف مختلفی با تایمر از جمله اطلاع رسانی به مشتریان در مورد انقضای پیشنهادات محدود یا نمایش زمان رویدادهای آینده و غیره با آن پیاده‌سازی می‌شود. علاوه بر این، می‌توان از آن برای ترغیب کاربران برای انجام تعامل به موقع استفاده کرد. به عنوان مثال، وب‌سایت‌های خاصی به‌طور خودکار پس از مدتی عدم فعالیت، کاربران را از سیستم خارج می‌کنند و این هشدار را به وسیله تایمرها به کاربران اعلام خواهند کرد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

در این مطلب آموزشی، روند ساخت تایمر با جاوا اسکریپت بررسی خواهد شد. کاربران با دنبال کردن مراحل موجود در این مطلب، می‌توانند این قابلیت را در پروژه‌های وب خود به طور موثر پیاده‌سازی کنند. برای شروع کار ساخت تایمر با جاوا اسکریپت ابتدا لازم است که سه فایل با نام‌های Index.html ، Script.js و Style.css ساخته شوند. در ادامه مراحل ساخت و محتویات و کدهای هر یک از فایل‌های نام برده تشریح خواهند شد. تصویر کلی تایمری که قرار است ساخته شود به صورت زیر خواهد بود:

۱. ساختار HTML پروژه ساخت تایمر با جاوا اسکریپت

مرحله اول ساخت تایمر جاوا اسکریپتی ساخت فایل «HTML» آن است که این فایل Index.htmlنام دارد. این فایل خود حاوی دو «بخش» (section ) است. بخش اول مربوط به تایمر و بخش دوم آن مربوط به محتوایی خواهد بود که پس از اتمام تایمر به کاربر نمایش داده می‌شود. فایل HTML در کل حاوی کدهای زیر است:

1<section id="timer">
2  <p>This content will be displayed in</p>
3  <div class="timer-container">
4    <span id="days">0 days</span>
5    <span id="hours">0 hours</span>
6    <span id="minutes">0 minutes</span>
7    and
8    <span id="seconds">0 seconds</span>
9  </div>
10</section>
11<section id="content">
12  <h1>سلام، به این آموزش از مجله فرادرس خوش آمدید</h1>
13</section>

پس از اتمام تایمر عبارت سلام، به این آموزش از مجله فرادرس خوش آمدید به کاربر نمایش داده خواهد شد.

 اطمینان از دسترسی

برای بهبود دسترسی، ویژگی role="timer" برای عناصری که زمان شمارش معکوس را نشان می‌دهند، اضافه شده است. بنابراین بخش تایمر را به صورت زیر باید به‌روز کرد:

1<section id="timer">
2  <p>This content will be displayed in</p>
3  <div class="timer-container">
4    <span id="days" role="timer">0 days</span>
5    <span id="hours" role="timer">0 hours</span>
6    <span id="minutes" role="timer">0 minutes</span>
7    and
8    <span id="seconds" role="timer">0 seconds</span>
9  </div>
10</section>
11<section id="content">
12  <h1>سلام، به این آموزش از مجله فرادرس خوش آمدید</h1>
13</section>

۲. استایل دهی به تایمر جاوا اسکریپتی

این مرحله مربوط به استایل دهی در ساخت تایمر با جاوا اسکریپت است. فایل «CSS» حاوی کدهای زیر خواهد بود:

1#timer {
2  position: fixed;
3  top: 0;
4  bottom: 0;
5  display: flex;
6  flex-direction: column;
7  min-height: 100vh;
8  justify-content: center;
9  align-items: center;
10  width: 100%;
11  z-index: 2;
12}
13#content {
14  opacity: 0;
15}

فایل بالا هم از دو قسمت تایمر و محتوا تشکیل شده است. قسمت اول کد بالا تایمر را به عنوان نوعی «محفظه» (کانتینر | Container) ثابت تنظیم می‌کند که کل استایل تایمر را پوشش می‌دهد. همچنین با استفاده از ویژگی‌های «فلکس‌باکس» (Flexbox)، محتوا به صورت عمودی و افقی تراز می‌شود. همچنین قسمت محتوای کد بالا، opacity اولیه قسمت محتوا را روی 0 تنظیم کرده و آن را مخفی می‌کند. با این کار، بخش تایمر ثابت می‌شود و کل صفحه را پوشش می‌دهد و قسمت محتوا در ابتدا مخفی خواهد شد. در صورت نیاز می‌توان سبک و استایل تایمر را کاملاً سفارشی‌سازی کرد.

۳. ساخت تایمر شمارش معکوس با جاوا اسکریپت

این مرحله از ساخت تایمر با جاوا اسکریپت مربوط به ساخت ویژگی شمارش معکوس است که برای این هدف باید منطق زیر را پیاده کرد:

• تنظیم مقدار شمارش معکوس بر اساس تاریخ یا زمان خاص
• دریافت تاریخ جاری و کم کردن مقدار شمارش معکوس از آن
• به‌روزرسانی به طور مداوم شمارش معکوس در فاصله زمانی ١ ثانیه

نکته: اگر تاریخ شمارش معکوس کمتر یا مساوی با تاریخ فعلی باشد، شمارش معکوس به پایان می‌رسد.

در ادامه دو روش تعریف شمارش معکوس برای ساخت تایمر مد نظر ارائه خواهد شد.

۱. تعریف مقدار شمارش معکوس به عنوان یک تاریخ و زمان خاص

می توان مقدار شمارش معکوس را با استفاده از سازنده Date()‎ مقداردهی اولیه کرده و تاریخ و زمان خاصی را مشخص کرد. این روش برای نمایش شمارش معکوس ثابت مانند پیشنهادات ویژه یا رویدادها مناسب است. برای مثال، تنظیم شمارش معکوس برای پایان در (1 آگوست 2023)، در ساعت «00:00» بامداد به صورت زیر خواهد بود:

1let countdownDate = new Date('01 Agust 2023 00:00');

٢. تعریف مقدار شمارش معکوس به عنوان واحد زمان اضافه شده به تاریخ فعلی

همچنین می‌توان تایمر شمارش معکوس را با افزودن واحد زمانی خاص به تاریخ فعلی مقداردهی اولیه کرد. این روش برای تعاملات مبتنی بر کاربر یا شمارش معکوس پویا مفید است. برای این کار می‌توان از روش دریافت و تنظیم ساعت و زمان استفاده کرد. برای مثال، تنظیم شمارش معکوس برای شروع ۳۰ ثانیه پس از ورود کاربر به صفحه وب می‌توان به صورت زیر عمل کرد:

1let countdownDate = new Date();
2countdownDate.setSeconds(countdownDate.getSeconds() + 30);

همچنین می‌توان این رویکرد را برای چند دقیقه یا ساعت به صورت زیر تغییر داد:

1let countdownDate = new Date();
2countdownDate.setMinutes(countdownDate.getMinutes() + 5);
3let countdownDate = new Date();
4countdownDate.setHours(countdownDate.getHours() + 1);

پس از تنظیم مقدار شمارش معکوس، می‌توان برای عناصر HTML «ثابت‌هایی» (Consts) تعریف کرد که شمارش معکوس را نمایش می‌دهند. در این‌جا ثابت‌ها به صورت زیر هستند:

1const daysElem = document.getElementById("days");
2const hoursElem = document.getElementById("hours");
3const minutesElem = document.getElementById("minutes");
4const secondsElem = document.getElementById("seconds");
5const timer = document.getElementById("timer");
6const content = document.getElementById("content");

با تعریف این ثابت‌ها، می‌توان به اجرای تابع شمارش معکوس ادامه داد و مراحل بعدی را دنبال کرد.

٤. ساخت تابع StartCountdown

در این مرحله از ساخت تایمر با جاوا اسکریپت، تابع startCountdown()‎ برای محاسبه زمان باقی مانده بین تاریخ فعلی و تاریخ شمارش معکوس ایجاد خواهد شد. از متد Date.getTime()‎ برای تبدیل هر دو مقدار به میلی‌ثانیه استفاده می‌شود و سپس اختلاف بر 1000 تقسیم خواهد شد تا به ثانیه تبدیل گردد.

1const startCountdown = () => {
2  const now = new Date().getTime();
3  const countdown = new Date(countdownDate).getTime();
4  const difference = (countdown - now) / 1000;
5};

در مرحله بعد، باید مقدار تفاوت را به روز، ساعت، دقیقه و ثانیه تبدیل کرد تا مقدار تایمر تعیین شود. برای تبدیل ثانیه به روز، اختلاف ثانیه‌ها بر مقدار یک روز یعنی (60 seconds * 60 minutes * 24 hours) تقسیم شده و باید به نزدیکترین عدد صحیح گرد شود.

1let days = Math.floor(difference / (60 * 60 * 24));

فرض بر این است مدت زمان شمارش معکوس 90000 ثانیه باشد. اگر مستقیماً این ثانیه‌ها به ساعت تبدیل شوند، 25 ساعت به تایمر فرصت می‌دهد. با این حال، ما می‌خواهیم شمارش معکوس را در قالبی نمایش دهیم که شامل روزها و ساعت‌ها باشد. برای رسیدن به این هدف، ابتدا باید دریافت که در این 90000ثانیه چند روز کامل گنجانده شده است. می‌توان این را با تقسیم تعداد کل ثانیه‌ها (90000) بر تعداد ثانیه‌های یک روز محاسبه کرد که مقدار آن به صورت زیر است:

160 seconds * 60 minutes * 24 hours = 86,400 seconds

بنابراین، 90000ثانیه تقسیم بر 86400 ثانیه تقریباً 1 روز می‌شود. این بدان معناست که 1 روز کامل در 90000ثانیه وجود دارد. اکنون، ما زمان باقیمانده 3600 ثانیه داریم (90,000 seconds - 86,400 seconds). ما می‌خواهیم این زمان باقی‌مانده را به ساعت تبدیل کنیم. برای تبدیل ثانیه‌های باقی مانده به ساعت، تعداد ثانیه‌ها (3600) بر تعداد ثانیه‌های ۱ ساعت تقسیم می‌شود که60 seconds * 60 minutes = 3,600 seconds است. بنابراین، 3600 ثانیه تقسیم بر 3600 ثانیه 1 ساعت می‌شود. این به این معنی است که ۱ ساعت کامل در 3600ثانیه باقی مانده وجود دارد. با انجام این محاسبات، تعیین می‌شود که 90000ثانیه را می‌توان به صورت ۱ روز و ۱ ساعت در صفحه شمارش معکوس نمایش داد.

1let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));

همان تقسیم تجمعی برای دقیقه و ثانیه اعمال می‌شود:

1let minutes = Math.floor((difference % (60 * 60)) / 60);
2let seconds = Math.floor(difference % 60);

برای نمایش مقادیر محاسبه شده در عناصر HTML، تابعی به نام formatTime()‎ ایجاد می‌شود تا متن واحد زمان را بر اساس مقدار زمان به صورت مفرد یا جمع فرمت کند.

1const formatTime = (time, string) => {
2  return time == 1 ? `${time} ${string}` : `${time} ${string}s`;
3};