آموزش ایجاد ساعت محلی بدون رفرش با جاوا اسکریپت

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

دو نکته در این مطلب حائز اهمیت است.

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

آموزش ایجاد ساعت محلی بدون رفرش با جاوا اسکریپت

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

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

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

در اولین قدم همانطور که در کدهای زیر مشاهده می فرماید برای ایجاد و نمایش ساعت لازم است از متد ()date استفاده کنیم تا ساعت فرآخوانی شود.

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

var d = new Date();
var n = d.toLocaleTimeString();
console.log(n)

نکته اینجاست شما وقتی صفحه را رفرش می نماید ثانیه شمار تغییر می کند و بدون رفرش صفحه ثانیه شمار ثابت است. برای اینکه ثانیه شمار بدون رفرش صفحه کار کند باید از متد setInterval که متد زمان است استفاده کنیم. نحوه اجرای متد setInterval به شرح زیر است

setInterval(
function(){
alert("Hello");
}, ۳۰۰۰);

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

ما در تابع بالا دستور دادیم پنجره هشدار با نوشته Hello هر سه ثانیه نمایش داده بشود. می توانید این کدها را خودتان امتحان کنید.

پس تا اینجا شما یادگرفتید چگونه ساعت محلی را می توان ایجاد کرد و چگونه می توان شمارنده ایجاد کرد حال وقت ترکیب این دو مورد باهم هست.

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

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

امیدواریم این مطلب مفید بوده باشه و شما می تونید نظرات خود را در انتهای این صفحه با ما به اشتراک بگذارید.

setInterval(
function(){
var d = new Date();
var n = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = n;}, 1000);

برای مشاهده آنلاین پروژه ساعت محلی بدون رفرش با جاوا اسکریپت کلیک کنید تا آن را در Codepen.io ایتروز مشاهده نماید.

منبع » آکادمی ایتروز