بازی با زمان!

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

jquery idletimer plugin
یک پلاگین جذاب از paul irish (یکی از گسترش‌دهندگان خود jQuery) که می‌تواند زمان بیکار ماندن و رهاشدن صفحه شما را اندازه‌گیری کند!
این کار هم برای داشتن آمار! و هم بارگزاری اجزای اضافی در وقت بیکاری صفحه و ... می‌تواند کاربرد داشته باشد
time ago
در صفحاتی که زیاد آپدیت می‌شود، معمولا زمان به صورت تفاضلی درج می‌شود یعنی مثلا به صورت «** ثانیه قبل» یا «** دقیقه قبل» و ...
خب تا اینجای کار که بد نیست. اما مشکل اینجاست که وقتی کاربر چند دقیقه در همان صفحه باقی می‌ماند، لازم است مقدار زمان تفاضلی نیز آپدیت شود و مثلا عبارت «4 دقیقه پیش» بعد از گذشت 1 دقیقه به عبارت «5 دقیقه پیش» تبدیل شود.
برای این منظور، پلاگین‌های زیادی وجود دارد که timeago یک نمونه جدید و عالی آن است.

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

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

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

<?php
echo '
  <div id="time"></div>
  <script>
    var uts = ' . time() . ';
  </script>
  <script src="time.js"></script>
';

حال در فایل جاوا اسکریپت، کافی است که تابعی برای محاسبه ساعت منطقه موردنظر (مثلا ایران) بر اساس unix time stamp تعریف کنیم و سپس هر ثانیه به محاسبه آن بر اساس unix time stamp دریافتی از سرور بپردازیم. یعنی چیزی شبیه این:

//  تابع محاسبه زمان ایران بر اساس زمان یونیکسی
function getIranClock(){
  var dt=new Date(1E3*uts+3.5*36E5), h=dt.getUTCHours(),
    m=dt.getUTCMinutes(), s=dt.getUTCSeconds();
  return h + ':' + ((10>m?'0':'') + m) + ':' + ((10>s?'0':'') + s);
};

//  تابع مربوط به آپدیت زمان
function updateClock(){
  uts++;
  document .getElementById("time") .innerHTML = getIranClock();
}

//  اجرای تابع مربوط به آپدیت زمان در هر ثانیه
setInterval(updateClock, 1000);

اما گاهی ممکن است ساعت سرور نیز غلط باشد یا به هر دلیلی نتوانیم به آن اتکاء کنیم (مثلا اجازه اجرای کد php در سرور را نداشته باشیم) که در اینصورت می‌توانیم با کمک تکنیک jsonP ، ساعت جهانی را حسب unix timestamp ، از سایت‌هایی که API دارند، به دست آوریم و نمایش دهیم. برای مثال:

<script>
uts=0;
function setUTS(r){
    uts = r.request.datetime;
}
</script>
<script src="http://api.open-notify.org/iss-pass.json?lat=1&lon=1&callback=setUTS"></script>

کد اجرا شونده مربوط به موضوعات فوق را در js fiddle ببینید...

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

یادداشت‌ها

بازی با زمان!

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

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: