فقط در 18 خط JavaScript تایمر شمارش معکوس بسازید

بعضی اوقات ، شما نیاز به ساخت یک ساعت شمارش معکوس JavaScript دارید. ممکن است یک رویداد ، فروش ، تبلیغ یا بازی داشته باشید. می توانید ساعتی را در JavaScript خام بسازید تا اینکه به سراغ نزدیکترین افزونه بروید. گرچه افزونه های ساعت بسیار خوبی وجود دارد ، در اینجا مزایای استفاده از JavaScript خام آورده شده است:

• کد شما سبک خواهد بود زیرا وابستگی های آن صفر خواهد بود.
• عملکرد وب سایت شما بهتر خواهد بود. نیازی به بارگذاری اسکریپت ها و صفحه های سبک خارجی نخواهید داشت.
• شما کنترل بیشتری خواهید داشت. شما ساعت را درست کرده اید تا دقیقاً همانطور که می خواهید رفتار کنید (نه اینکه بخواهید یک پلاگین را به خواست خود خم کنید).

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

برای کسب اطلاعات بیشتر در زمینه جاوا اسکریپت ، کتاب ما را بخوانید ، JavaScript: Novice to Ninja، نسخه 2.

ساعت اصلی: تا یک تاریخ یا زمان خاص شمارش معکوس کنید

در اینجا خلاصه ای از مراحل ایجاد یک ساعت اساسی آورده شده است:

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

یک تاریخ پایان معتبر تعیین کنید

ابتدا باید یک تاریخ پایان معتبر تعیین کنید. این باید یک رشته در هر قالب باشد که توسط JavaScript قابل درک باشد تاریخ. تجزیه () روش. مثلا:

ISO 8601 قالب:

const deadline = '2015-12-31';

قالب کوتاه:

const deadline = '31/12/2015';

یا ، قالب طولانی:

const deadline = 'December 31 2015';

هر یک از این قالب ها به شما امکان می دهد زمان و منطقه زمانی (یا جابجایی از UTC در مورد تاریخ های ISO) را مشخص کنید. مثلا:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

می توانید اطلاعات بیشتر در مورد قالب بندی تاریخ را در JavaScript در اینجا بخوانید این مقاله.

زمان باقیمانده را محاسبه کنید

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

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

اول ، ما در حال ایجاد یک متغیر هستیم total، زمان باقی مانده را تا پایان مهلت تعیین شده نگه دارید. Date.parse() تابع یک رشته زمانی را به میلی ثانیه تبدیل می کند. این به ما این امکان را می دهد تا دو بار از یکدیگر کم کنیم و مقدار زمان درمیان را بدست آوریم.

const total = Date.parse(endtime) - Date.parse(new Date());

زمان را به قالب قابل استفاده تبدیل کنید

اکنون می خواهیم میلی ثانیه را به روز ، ساعت ، دقیقه و ثانیه تبدیل کنیم. بیایید از ثانیه ها به عنوان مثال استفاده کنیم:

const seconds = Math.floor( (t/1000) % 60 );

بیایید آنچه در اینجا می گذرد را خراب کنیم

1. میلی ثانیه را بر 1000 تقسیم کنید تا به ثانیه تبدیل شود: (t/1000)
2. کل ثانیه ها را بر 60 تقسیم کرده و باقیمانده را بگیرید. شما همه ثانیه ها را نمی خواهید ، فقط آنهایی که پس از دقیقه شمارش شده اند باقی مانده اند: (t/1000) % 60
3. این را به نزدیکترین عدد کامل بچرخانید. این به این دلیل است که شما ثانیه های کامل می خواهید ، نه کسر ثانیه: Math.floor( (t/1000) % 60 )

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

داده های ساعت را به عنوان یک شی Re قابل استفاده مجدد خارج کنید

با آماده شدن روزها ، ساعت ها ، دقیقه ها و ثانیه ها ، اکنون آماده هستیم داده ها را به عنوان یک شی object قابل استفاده مجدد بازگردانیم:

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

این شی به شما امکان می دهد تابع خود را فراخوانی کرده و هر یک از مقادیر محاسبه شده را بدست آورید. در اینجا مثالی از نحوه دریافت دقیقه باقیمانده آورده شده است:

getTimeRemaining(deadline).minutes

راحت است ، درست است؟

ساعت را نمایش دهید و وقتی به صفر رسید آن را متوقف کنید

اکنون که تابعی داریم که روزها ، ساعت ها ، دقیقه ها و ثانیه های باقیمانده را تفکیک می کند ، می توانیم ساعت خود را بسازیم. ابتدا عنصر HTML زیر را برای نگه داشتن ساعت خود ایجاد خواهیم کرد:

<div id="clockdiv"></div>

سپس یک تابع می نویسیم که داده های ساعت را در داخل div جدید ما خروجی می گیرد:

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const timeinterval = setInterval(() => {
    const t = getTimeRemaining(endtime);
    clock.innerHTML = 'days: ' + t.days + '<br>' +
                      'hours: '+ t.hours + '<br>' +
                      'minutes: ' + t.minutes + '<br>' +
                      'seconds: ' + t.seconds;
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  },1000);
}

این تابع دو پارامتر می گیرد. اینها شناسه عنصری است که شامل ساعت ما و زمان پایان شمارش معکوس است. در داخل تابع ، a را اعلام خواهیم کرد clock متغیر و استفاده از آن برای ذخیره مرجع به بخش ظرف ساعت ما. این بدان معناست که ما مجبور نیستیم مرتباً از DOM س quال کنیم.

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

• زمان باقیمانده را محاسبه کنید.
• زمان باقیمانده را به div خود منتقل کنید.
• اگر زمان باقیمانده به صفر رسید ، ساعت را متوقف کنید.

در این مرحله ، تنها مرحله باقی مانده این است که ساعت را به همین ترتیب اجرا کنید:

initializeClock('clockdiv', deadline);

تبریک می گویم! اکنون فقط در 18 خط جاوا اسکریپت یک ساعت ابتدایی دارید.

ساعت خود را برای نمایش آماده کنید

قبل از استایل ساعت ، باید کمی کارها را اصلاح کنیم.

• تأخیر اولیه را بردارید تا ساعت شما بلافاصله نشان داده شود.
• اسکریپت ساعت را کارآمدتر کنید تا به طور مداوم کل ساعت را بازسازی نکند.
• صفرهای اصلی را به دلخواه اضافه کنید.

تأخیر اولیه را حذف کنید

در ساعت ، ما استفاده کرده ایم setInterval هر ثانیه نمایشگر را به روز کنید. این در بیشتر مواقع خوب است ، مگر در اوایل که یک ثانیه تأخیر وجود دارد. برای حذف این تاخیر ، باید یک بار ساعت را قبل از شروع فاصله به روز کنیم.

بیایید عملکرد ناشناس را که به آن منتقل می کنیم ، منتقل کنیم setInterval به عملکرد جداگانه خود. می توانیم این تابع را نامگذاری کنیم updateClock. با … تماس بگیر updateClock عملکرد یک بار در خارج از setInterval، و سپس دوباره آن را در داخل تماس بگیرید setInterval. به این ترتیب ساعت بدون تاخیر نشان داده می شود.

در JavaScript خود ، این را جایگزین کنید:

const timeinterval = setInterval(() => { ... },1000);

با این:

function updateClock(){
  const t = getTimeRemaining(endtime);
  clock.innerHTML = 'days: ' + t.days + '<br>' +
                    'hours: '+ t.hours + '<br>' +
                    'minutes: ' + t.minutes + '<br>' +
                    'seconds: ' + t.seconds;
  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
}

updateClock(); 
var timeinterval = setInterval(updateClock,1000);

از بازسازی مداوم ساعت خودداری کنید

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

HTML اینجاست:

<div id="clockdiv">
    Days: <span class="days"></span><br>
    Hours: <span class="hours"></span><br>
    Minutes: <span class="minutes"></span><br>
    Seconds: <span class="seconds"></span>
</div>

حال بیایید به آن عناصر اشاره کنیم. کد زیر را درست بعد از اینکه اضافه کنید ، اضافه کنید clock متغیر تعریف شده است

const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');

بعد ، ما باید تغییر دهیم updateClock عملکرد فقط برای به روزرسانی اعداد. کد جدید به صورت زیر خواهد بود:

function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

صفرهای پیشرو را اضافه کنید

اکنون که ساعت دیگر در هر ثانیه ساعت از نو ساخته نمی شود ، یک کار دیگر نیز باید انجام دهیم: افزودن صفرهای اصلی. به عنوان مثال ، به جای اینکه ساعت 7 ثانیه را نشان دهد ، 07 ثانیه را نشان می دهد. یک روش ساده برای این کار این است که یک رشته “0” به ابتدای یک عدد اضافه کنید و سپس دو رقم آخر را برش دهید.

به عنوان مثال ، برای افزودن صفر اصلی به مقدار “ثانیه” ، این را تغییر می دهید:

secondsSpan.innerHTML = t.seconds;

به این:

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

در صورت تمایل می توانید صفرهای اصلی را نیز به دقیقه و ساعت اضافه کنید. اگر تا اینجا آمده اید ، تبریک می گویم! ساعت شما اکنون برای نمایش آماده است.

توجه داشته باشید: برای شروع شمارش معکوس ممکن است مجبور شوید روی “اجرا” در CodePen کلیک کنید.

قلم را ببینید
ساعت شمارش معکوس جاوا اسکریپت مدل شده توسط SitePoint (SitePoint)
بر CodePen.

با استفاده از آن بیشتر

مثالهای زیر نحوه گسترش ساعت را برای موارد خاص استفاده نشان می دهد. همه آنها بر اساس مثال اساسی مشاهده شده در بالا است.

ساعت را به صورت خودکار برنامه ریزی کنید

بیایید بگوییم که ما می خواهیم ساعت در بعضی روزها نشان داده شود اما در روزهای دیگر. به عنوان مثال ، ممکن است یک سری رویدادها پیش رو داشته باشند و نمی خواهیم هر بار ساعت را به صورت دستی به روز کنیم. در اینجا چگونگی برنامه ریزی موارد از قبل آورده شده است.

با تنظیم ساعت آن را پنهان کنید display دارایی به none در CSS. سپس موارد زیر را به initializeClock تابع (بعد از خطی که با شروع می شود var clock) این باعث می شود که ساعت فقط یک بار ساعت نمایش داده شود initializeClock تابع نامیده می شود:

clock.style.display = 'block';

در مرحله بعدی می توانیم تاریخ هایی را که بین ساعت باید نشان داده شود مشخص کنیم. این جایگزین خواهد شد deadline متغیر:

const schedule = [
    ['Jul 25 2015', 'Sept 20 2015'],
    ['Sept 21 2015', 'Jul 25 2016'],
    ['Jul 25 2016', 'Jul 25 2030']
];

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

سرانجام ، هنگامی که کاربر صفحه را بارگیری می کند ، باید بررسی کنیم که آیا در هر یک از بازه های زمانی مشخص هستیم. این کد باید جایگزین تماس قبلی با initializeClock تابع.

for (var i=0; i<schedule.length; i++) {
  var startDate = schedule[i][0];
  var endDate = schedule[i][1];

  
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  
  if (endMs > currentMs && currentMs >= startMs ) {
    initializeClock('clockdiv', endDate);
  }
}

schedule.forEach(([startDate, endDate]) => {
  
  const startMs = Date.parse(startDate);
  const endMs = Date.parse(endDate);
  const currentMs = Date.parse(new Date());

  
  if (endMs > currentMs && currentMs >= startMs ) {
    initializeClock('clockdiv', endDate);
  }
});

اکنون می توانید ساعت خود را از قبل و بدون نیاز به به روزرسانی دستی تنظیم کنید. در صورت تمایل می توانید کد را کوتاه کنید. من بخاطر قابل خواندن بودنم حرفم را زبون زدم.

تایمر را برای 10 دقیقه از زمان ورود کاربر تنظیم کنید

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

تنها کاری که ما در اینجا باید انجام دهیم جایگزینی صفحه است deadline متغیر با این:

const timeInMinutes = 10;
const currentTime = Date.parse(new Date());
const deadline = new Date(currentTime + timeInMinutes*60*1000);

این کد زمان فعلی را می گیرد و ده دقیقه اضافه می کند. مقادیر به میلی ثانیه تبدیل می شوند ، بنابراین می توانند با هم جمع شوند و به یک مهلت جدید تبدیل شوند.

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

پیشرفت ساعت را در میان صفحات حفظ کنید

گاهی اوقات لازم است که وضعیت ساعت بیش از صفحه فعلی حفظ شود. اگر می خواستیم یک تایمر 10 دقیقه ای در سرتاسر سایت تنظیم کنیم ، نمی خواهیم وقتی کاربر به صفحه دیگری می رود دوباره تنظیم شود.

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

منطق اینجاست:

1. اگر ضرب الاجل در کوکی ثبت شد ، از آن مهلت استفاده کنید.
2. اگر کوکی موجود نیست ، مهلت جدیدی تعیین کنید و آن را در یک کوکی ذخیره کنید.

برای اجرای این ، جایگزین کنید deadline متغیر با موارد زیر:

let deadline;


if(document.cookie && document.cookie.match('myClock')){
  
  deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
} else {
  
  

  
  const timeInMinutes = 10;
  const currentTime = Date.parse(new Date());
  deadline = new Date(currentTime + timeInMinutes*60*1000);

  
  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}

این کد از کوکی ها و عبارات منظم استفاده می کند که هر دو به تنهایی موضوعات جداگانه ای هستند. به همین دلیل ، در اینجا خیلی به جزئیات نمی پردازم. نکته مهمی که باید به آن توجه کنید این است که شما باید تغییر کنید .yourdomain.com به دامنه واقعی خود بروید.

یک نکته مهم درباره زمان سمت مشتری

تاریخ ها و زمان های جاوا اسکریپت از رایانه کاربر گرفته می شود. این بدان معناست که کاربر می تواند با تغییر زمان روی دستگاه خود بر ساعت جاوا اسکریپت تأثیر بگذارد. در بیشتر موارد ، این مهم نخواهد بود. اما در مورد یک چیز فوق العاده حساس ، لازم است که از سرور وقت بگیرید. این کار را می توان با کمی PHP یا Ajax انجام داد که هر دو از حوصله این آموزش خارج هستند.

پس از گرفتن وقت از سرور ، می توانیم با استفاده از همان تکنیک های این آموزش با آن کار کنیم.

خلاصه

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

بعدی چیست

با کد ساعت خود بازی کنید. سعی کنید برخی از سبک های خلاقانه یا ویژگی های جدید (مانند دکمه های مکث و از سرگیری) را اضافه کنید. پس از آن ، اگر به هر نمونه ساعت جالب توجهی که می خواهید به اشتراک بگذارید ، در انجمن ها با ما در میان بگذارید.