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

Q: نحوه ساخت تایمر با متد SetInterval چگونه است؟

میتوان با استفاده از متد «SetInterval در جاوا اسکریپت» نوعی تایمر شمارش معکوس تنظیم کرد. این متد به طور مداوم نوعی تابع را فراخوانی میکند یا یک قطعه کد را با تاخیر زمانی ثابت بین هر تماس اجرا خواهد کرد. متد «SetInterval» تابع را در فواصل زمانی توصیف شده بر حسب میلیثانیه فراخوانی میکند.

۱۱۰۴ بازدید

آخرین به‌روزرسانی: ۲۰ تیر ۱۴۰۲

زمان مطالعه: ۱۱ دقیقه

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

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

فهرست مطالب این نوشته

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

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

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

سخن پایانی

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

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

فیلم آموزش 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");

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

مطلب پیشنهادی:

آموزش جاوا اسکریپت پروژه محور | 15 پروژه عملی و کاربردی

شروع مطالعه

٤. ساخت تابع 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};

اکنون می‌توان تابع startCountdown()‎ را به‌روزرسانی کرد تا مقادیر محاسبه‌ شده را به عناصر HTML انتقال داد که به صورت زیر خواهد بود:

1const startCountdown = () => {
2  const now = new Date().getTime();
3  const countdown = new Date(countdownDate).getTime();
4  const difference = (countdown - now) / 1000;
5  let days = Math.floor(difference / (60 * 60 * 24));
6  let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
7  let minutes = Math.floor((difference % (60 * 60)) / 60);
8  let seconds = Math.floor(difference % 60);
9  daysElem.innerHTML = formatTime(days, "day");
10  hoursElem.innerHTML = formatTime(hours, "hour");
11  minutesElem.innerHTML = formatTime(minutes, "minute");
12  secondsElem.innerHTML = formatTime(seconds, "second");
13};

با این عملکرد، تایمر شمارش معکوس اکنون به‌روز می‌شود و زمان باقی‌مانده را به درستی نمایش می‌دهد.

۵. اجرای تابع در فواصل زمانی

اکنون که تابع شمارش معکوس موجود است نوبت به ایجاد تابعی دیگر خواهد رسید که این شمارش معکوس را در فاصله زمانی ۱ ثانیه اجرا می‌کند. برای این هدف ابتدا متغیری به نام timerInterval به صورت زیر اعلان می‌شود:

1let timerInterval;

در مرحله بعد، متغیر timerInterval به عنوان نوعی تابع setInterval تعریف می‌شود که تابع startCountdown را هر ۱ ثانیه هنگام بارگیری صفحه اجرا می‌کند:

1window.addEventListener("load", () => {
2  startCountdown();
3  timerInterval = setInterval(startCountdown, 1000);
4});

در این رویکرد، تابع ‎ startCountdown بلافاصله زمانی که صفحه بارگذاری می‌شود، فراخوانی خواهد شد تا مقادیر شمارش معکوس به‌روزرسانی شود. سپس، بازه‌ای تنظیم می‌شود که تابع startCountdown را هر ۱ ثانیه فعال می‌کند تا شمارش معکوس ادامه داشته باشد. همچنین باید شرایطی را که تایمر شمارش معکوس به پایان می‌رسد کنترل کرد. زمانی که تفاوت در تابع startCountdown کمتر از ۱ ثانیه باشد، می‌توان تعیین کرد که شمارش معکوس به پایان رسیده است. برای انجام این کار، شرط در تابع startCountdown به صورت زیر اضافه می‌شود:

1const startCountdown = () => {
2  const now = new Date().getTime();
3  const countdown = new Date(countdownDate).getTime();
4  const difference = (countdown - now) / 1000;
5
6  if (difference < 1) {
7    endCountdown();
8  }
9
10  // Rest of the countdown logic...
11};

اگر اختلاف کمتر از ۱ ثانیه باشد، تابع endCountdown()‎ فراخوانی می‌شود که می‌توان آن را برای انجام اقدامات خاصی که کاربر می‌خواهد در زمان پایان شمارش معکوس انجام دهد، تعریف کرد. خروجی تا به این‌جای کار چیزی شبیه به تصویر زیر است.

٦. پایان شمارش معکوس تایمر

مرحله آخر در ساخت تایمر با جاوا اسکریپت کارهای مربوط به پایان تایمر و انجام عملیات خاصی است که کاربر تعریف می‌کند. در حال حاضر، شمارش معکوس تایمر بالا به طور نامحدود ادامه دارد که خیلی مفید نیست. با اجرای تابع endCountdown()‎ می‌توان آن را برطرف کرد. در تابع endCountdown()‎ وظایف زیر را انجام خواهد شد:

برای توقف به‌روزرسانی‌های شمارش معکوس، توابع داخلی باید متوقف شوند.
عنصر تایمر باید از «DOM» حذف شود تا نمایشگر شمارش معکوس پنهان گردد.
کلاس visible باید به قسمت محتوا اضافه گردد تا نمایش داده شود.

1const endCountdown = () => {
2  clearInterval(timerInterval);
3  timer.remove();
4  content.classList.add("visible");
5};

برای مدیریت نمایش بخش محتوا، از CSS استفاده می‌شود و کلاس visible هدف قرار داده خواهد شد. در این مثال، برخی از استایل‌های CSS برای بخش محتوا تعریف شده‌اند، از جمله مقیاس متن و انیمیشن تغییر رنگ پس زمینه. می‌توان این استایل‌ها را بر اساس نیاز خود تغییر داد.

1#content h1 {
2  font-size: 10vmax;
3  transform: scale(1.25);
4}
5#content.visible {
6  opacity: 1;
7  animation: colorChange 1s ease-in-out 0.5s forwards;
8}
9#content.visible h1 {
10  animation: scaleOut 1s ease-in-out 0.5s forwards;
11}
12@keyframes colorChange {
13  from {
14    color: #fcdf00;
15    background-color: #0d67ad;
16  }
17  to {
18    color: white;
19    background-color: black;
20  }
21}
22@keyframes scaleOut {
23  from {
24    transform: scale(1.25);
25  }
26  to {
27    transform: scale(1);
28  }
29}

این استایل‌های CSS زمانی که بخش محتوا قابل مشاهده شود، جلوه‌های بصری مورد نظر را اعمال می‌کنند. حال با این کار ساخت تایمر با جاوا اسکریپت پایان می‌یابد و خروجی مانند خروجی زیر را برای ما تولید می‌کند:

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

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

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

کلیک کنید

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

کد HTML ساخت تایمر با جاوا اسکریپت این پروژه به صورت زیر است:

1<section id="timer" aria-live="polite">
2  <link rel="stylesheet" href="style.css">
3  <script src="script.js"></script>
4  <p>This content will be displayed in</p>
5  <div class="timer-container">
6    <span id="days" role="timer">0 days</span>
7    <span id="hours" role="timer">0 hours</span>
8    <span id="minutes" role="timer">0 minutes</span>
9    and
10    <span id="seconds" role="timer">0 seconds</span>
11  </div>
12</section>
13
14<section id="content">
15  <h1>سلام، به این آموزش از مجله فرادرس خوش آمدید</h1>
16</section>
17
18<footer>
19  تهیه شده توسط <a href="https://blog.faradars.org/" target="_blank" rel="noopener">تیم تحریریه فرادرس</a> <span class="heart">♥</span>
20</footer>

کد فوق را می‌توان بسته به نیاز خود کاملا سفارشی سازی کرد.

مطلب پیشنهادی:

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

شروع مطالعه

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

کد CSS ساخت تایمر با جاوا اسکریپت به صورت زیر است:

1@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
2
3body {
4  margin: 0;
5  font-family: "Space Mono", monospace;
6  color: #fcdf00;
7  background: #0d67ad;
8}
9
10#timer {
11  position: fixed;
12  top: 0;
13  bottom: 0;
14  display: flex;
15  flex-direction: column;
16  min-height: 100vh;
17  justify-content: center;
18  align-items: center;
19  text-align: center;
20  width: 100%;
21  z-index: 2;
22}
23
24.timer-container {
25  font-size: 3em;
26}
27
28.timer-container span {
29  white-space: nowrap;
30}
31
32#content {
33  opacity: 0;
34  height: 100vh;
35  width: 100%;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  text-align: center;
40}
41
42#content h1 {
43  font-size: 10vmax;
44  transform: scale(1.25);
45}
46
47#content.visible {
48  opacity: 1;
49  animation: colorChange 1s ease-in-out 0.5s forwards;
50}
51
52#content.visible h1 {
53  animation: scaleOut 1s ease-in-out 0.5s forwards;
54}
55
56footer {
57  bottom: 0;
58  width: 100%;
59  padding: 1em;
60  text-align: center;
61  background-color: #ffdfb9;
62  color: #0d67ad;
63}
64
65footer a {
66  color: #0d67ad;
67  text-decoration: none;
68}
69
70footer .heart {
71  color: #dc143c;
72}
73
74@keyframes colorChange {
75  from {
76    color: #fcdf00;
77    background-color: #0d67ad;
78  }
79  to {
80    color: white;
81    background-color: black;
82  }
83}
84
85@keyframes scaleOut {
86  from {
87    transform: scale(1.25);
88  }
89  to {
90    transform: scale(1);
91  }
92}

همچنین می‌توان سبک و استایل تایمر را به صورت دلخواه سفارشی کرد و کد بالا را تغییر داد.

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

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

کد جاوا اسکریپت ساخت تایمر هم به صورت زیر است:

1/* Set countdown date by adding hours to current date */
2// let countdownDate = new Date().setHours(new Date().getHours() + 1)
3
4/* Set countdown date by adding minutes to current date */
5// let countdownDate = new Date().setMinutes(new Date().getMinutes() + 5);
6
7/* Set countdown date by adding seconds to current date */
8let countdownDate = new Date('04 July 2023 00:00')
9
10let timerInterval;
11
12const daysElem = document.getElementById("days"),
13  hoursElem = document.getElementById("hours"),
14  minutesElem = document.getElementById("minutes"),
15  secondsElem = document.getElementById("seconds"),
16  timer = document.getElementById("timer"),
17  content = document.getElementById("content");
18
19const formatTime = (time, string) => {
20  return time == 1 ? `${time} ${string}` : `${time} ${string}s`;
21};
22
23const startCountdown = () => {
24  const now = new Date().getTime();
25  const countdown = new Date(countdownDate).getTime();
26
27  const difference = (countdown - now) / 1000;
28
29  if (difference < 1) {
30    endCountdown();
31  }
32
33  let days = Math.floor(difference / (60 * 60 * 24));
34  let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
35  let minutes = Math.floor((difference % (60 * 60)) / 60);
36  let seconds = Math.floor(difference % 60);
37
38  daysElem.innerHTML = formatTime(days, "day");
39  hoursElem.innerHTML = formatTime(hours, "hour");
40  minutesElem.innerHTML = formatTime(minutes, "minute");
41  secondsElem.innerHTML = formatTime(seconds, "second");
42};
43
44const endCountdown = () => {
45  clearInterval(timerInterval);
46  timer.remove();
47  content.classList.add("visible");
48};
49
50window.addEventListener("load", () => {
51  startCountdown();
52  timerInterval = setInterval(startCountdown, 1000);
53});

می‌توان رویکردهای مختلفی برای ساخت تایمر با جاوا اسکریپت در کد بالا اعمال کرد. به صورت کلی پروژه جاوا اسکریپت بالا می‌تواند تمرین خوبی برای علاقه‌مندان به برنامه نویسی جاوا اسکریپت باشد.

مطلب پیشنهادی:

نقشه راه آموزش پروژه محور جاوا اسکریپت

شروع مطالعه

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

در این بخش ٢ سوال متدوال در رابطه با ساخت تایمر با Javascript برای درک بهتر روند پیاده‌سازی و ساخت آن با دو متد SetInterval و SetTimeout ارائه خواهد شود.

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس

کلیک کنید

نحوه ساخت تایمر با متد SetInterval چگونه است؟

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

نحوه ساخت تایمر با متد setTimeout چگونه است؟

متد «SetTimeout» نوعی تابع را فراخوانی کرده یا عبارتی را پس از تعداد مشخصی از میلی‌ثانیه ارزیابی می‌کند و پس از پایان زمان مد نظر تایمر پایان یافته و اتفاق مد نظر کاربر رخ خواهد داد.

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

بر اساس رای ۴ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

WebDesign.TutsPlus

کامل بهرامی (+)

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