آگهی
article

کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)

javascript-date-time

تاریخ و زمان، از جمله مباحث پرکاربرد و چالش های همیشگی در زبان های برنامه نویسی و به طور خاص در برنامه نویسی وب (php، asp، javascript و...) است، به خصوص برای کسانی که از تاریخی به جزء تاریخ میلادی استفاده می کنند (مانند ما کاربران فارسی زبان)، مشکل از این نیز پیچیده تر می شود، چرا که ناچاریم تاریخ میلادی را به شمسی تبدیل کنیم که خود به محاسبات دقیق و پیچیده نیاز دارد، از طرفی همان طور که پیش از این گفته ایم، جاوا اسکریپت یک زبان سمت کاربر (Client-side) است، بدین معنی که کدهای شما تنها در مرورگر کاربران قابل اجرا است و لذا تنظیمات آن نیز به مرورگر و به تبع به سیستم عامل کاربر وابسطه است (که خود معایب و مزایایی دارد)، به هر صورت آشنایی با نحوه کار توابع مربوط به تاریخ و زمان در جاوا اسکریپت، جهت تسلط بیشتر بر این زبان، جزء جدایی ناپذیر از آموزش های مقدماتی است و لذا در این مطلب می خواهیم به آن بپردازیم.

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


برای نمایش یک تاریخ در جاوا اسکریپت ابتدا باید یک شی (object) با استفاده از Date در کد خود ایجاد کنیم (این شی به صورت از پیش تعریف شده یا built-in در مفسر جاوا اسکریپت وجود دارد)، به طور مثال:
<script type="text/javascript">
var now =  new Date();
alert(now);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
Sun Jan 20 2013 13:45:58 GMT+0330 (Iran Standard Time)
اکنون متغیر فرضی now می تواند از توابع نمونه و از پیش تعریف شده شی Date استفاده کند، تعداد و کاربرد این توابع متنوع است که در زیر به اختصار به مهم ترین آنها اشاره می کنیم.

تابع getdate


از تابع getdate برای بدست آوردن روز به صورت عددی (بین 1 تا 31) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var day = now.getDate();
alert(day);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
20

تابع getDay


از تابع getDay برای بدست آوردن روز معین از روزهای هفته به صورت عددی (بین 0 تا 6) کاربرد دارد، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var day = now.getDay();
alert(day);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
0

تابع getFullYear


از تابع getFullYear برای بدست آوردن سال های میلادی به صورت عدد چهار رقمی استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var full_year = now.getFullYear();
alert(full_year);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
2013

تابع getHours


از تابع getHours برای بدست آوردن ساعت فعلی سیستم (به صورت عدد دو رقمی) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var hour = now.getHours();
alert(hour);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
13

تابع getMilliseconds


از تابع getMilliseconds برای بدست آوردن هزارم ثانیه از زمان فعلی (زمان موجود در شی Date) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var millisecond = now.getMilliseconds();
alert(millisecond);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
937

تابع getMinutes


از تابع getMinutes برای بدست آوردن دقیقه (بین عدد 1 تا 60) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var minute = now.getMinutes();
alert(minute);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
45

تابع getMonth


از تابع getMonth برای بدست آوردن ماه (بین اعداد 0 تا 11) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var month = now.getMonth();
alert(month);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
0

تابع getSeconds


از تابع getSeconds برای بدست آوردن ثانیه (بین 0 تا 60) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var second = now.getSeconds();
alert(second);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
58

تابع getTime


از تابع getTime برای بدست آوردن مدت زمان به میلی ثانیه از نیمه شب اول ژانويه سال 1970 میلادی استفاده می شود (این عدد یک تاریخ قراردادی تعریف شده در Unix time است، در واقع این زمان مشخص کننده مدت میلی ثانیه سپری شده از شروع ساعت هماهنگ جهانی یا  Coordinated Universal Time (به اختصار  UTC یا POSIX) است، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var since_1970 = now.getTime();
alert(since_1970);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
1358681328943

تابع getTimezoneOffset


از تابع getTimezoneOffset برای بدست آوردن اختلاف زمانی به دقیقه از GMT استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
var time_zone = now.getTimezoneOffset();
alert(time_zone);
</script>
خروجی کد بالا به صورت نمونه زیر خواهد بود.
-210
نکته 1: خروجی تابع getTimezoneOffset برای زمان های محلی که اختلاف آنها نسبت به GMT مثبت باشد (مانند 3:30 برای ایران)، عدد منفی خواهد بود و بالعکس برای زمان های محلی که اختلاف آنها نسب به GMT منفی باشد، عدد مثبت خواهد بود.
نکته 2: توابعی که در بالا بررسی کردیم، به صورت استاندارد UTC یا ساعت هماهنگ جهانی نیز قابل استفاده هستند، لذا اگر ساعت محلی سیستم عامل با ساعت UTC برابر نباشد (اختلاف زمانی وجود داشته باشد)، استفاده یا عدم استفاده از UTC نیز نتیجه متفاوت خواهد داشت (در صورت استفاده، زمان دریافتی بر اساس استاندار UTC خواهد بود نه الزاما زمان سیستم عامل).

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


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

تابع setDate


از تابع setDate برای تغییر روز (بین 1 تا 31) از تاریخ مورد نظر استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setDate(22);
day = now.getDate();
alert(day);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
22

تابع setFullYear


از تابع setFullYear برای تنظیم سال به صورت عدد چهار رقمی استفاده می شود، به طورر مثال:
<script type="text/javascript">
var now =  new Date();
now.setFullYear(2000);
full_year = now.getFullYear();
alert(full_year);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
2000

تابع setHours


از تابع setHours برای تنظیم ساعت (بین 0 تا 23) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setHours(14);
hour = now.getHours();
alert(hour);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
14

تابع setMilliseconds


از تابع setMilliseconds برای تنظیم زمان به هزارم ثانیه (بین 0 تا 999) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setMilliseconds(556);
millisecond = now.getMilliseconds();
alert(millisecond);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
556

تابع setMinutes


از تابع setMinutes برای تنظیم دقیقه (بین عدد 1 تا 60) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setMinutes(23);
minute = now.getMinutes();
alert(minute);
</script>
خروجی کد بالا به شکل زیر خواهد بود.
23

تابع setMonth


از تابع setMonth برای تنظیم یک ماه (بین اعداد 0 تا 11) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setMonth(0);
month = now.getMonth();
alert(month);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
0

تابع setSeconds


از تابع setSeconds برای تنظیم زمان به ثانیه (بین اعداد 0 تا 60) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setSeconds(33);
second = now.getSeconds();
alert(second);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
33

تابع setTime


از تابع setTime برای تنظیم زمان به صورت میلی ثانیه از نیمه شب اول ژانويه سال 1970 میلادی (زمان به صورت Unix) استفاده می شود، به طور مثال:
<script type="text/javascript">
var now =  new Date();
now.setTime(1358681325766);
time = now.getTime();
alert(time);
</script>
خروجی کد بالا به صورت زیر خواهد بود.
1358681325766
نکته: به جزء تابع setTime، سایر توابع مربوط به set بر اساس استاندارد UTC نیز قابل استفاده هستند.

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


در پایان این آموزش بد نیست نگاهی داشته باشیم به توابع مربوط به فرمت بندی و نمایش تاریخ و زمان در جاوا اسکریپت، البته همان طور که پیش از این عنوان شد، این توابع از پیش تعریف شده منطبق با تاریخ میلادی هستند و لذا برای سایر موارد باید کلاس ها و توابعی مجزا و مستقل نوشت، به هر صورت لیستی از این توابع و نمونه خروجی آنها را در زیر ملاحظه می کنید.
تابع toDateString - نمونه خروجی: Thu Jan 24 2013
تابع toLocaleDateString - نمونه خروجی: Thursday, January 24, 2013
تابع toLocaleFormat - نمونه خروجی: Thursday, January 24, 2013 10:01:15 PM
تابع toLocaleString - نمونه خروجی: Thursday, January 24, 2013 10:02:12 PM
تابع toLocaleTimeString - نمونه خروجی: 10:03:56 PM
تابع toString - نمونه خروجی: Thu Jan 24 2013 22:16:49 GMT+0330 Iran Standard Time
تابع toTimeString - نمونه خروجی: 22:18:04 GMT+0330 Iran Standard Time

مثال و پیش نمایش آنلاین


در زیر می توانید مثالی از کاربرد تاریخ و زمان در جاوا اسکریپت و پیش آنلاین آن را ملاحظه و بررسی نمائید.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | date و time در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#date{
    direction:ltr;
}
</style>
<script type="text/javascript">
function RefreshDate(){
    var refresh_date = setTimeout('ShowDate();', 1000);
}
function ShowDate(){
    var now =  new Date();
    var show = document.getElementById('date').innerHTML = now;
    var refresh_date = RefreshDate();
}
</script>
</head>
<body onload="ShowDate();">
<noscript>جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود.</noscript>
<div id="date"></div>
<hr>
با استفاده از Date و setTimeout می توان تاریخ و زمان را به صورت داینامیک نمایش داد.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» عملگرها (Operators) در جاوا اسکریپت (JavaScript)
commentنظرات (۴۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: عاطفه
زمان: ۱۵:۰۵:۳۶ - تاریخ: ۱۳۹۶/۰۴/۱۶
سلام و خسه نباشید
من میخام با نت بینز، تاریخ فعلی رو بگیرم و روزها افزایش پیدا کنن تا به تاریخی که در یک تکست باکس نوشتم برسه، در اون روز باید هشدار بده
میشه لطفا کمکم کنید؟؟؟
پاسخ: 
قاعدتا نوشتن اسکریپت کامل آنطور که مد نظر شما است در قالب یک پاسخ ممکن نیست و باید بخشی از کدها را خودتان بنویسید، جهت راهنمایی نمونه زیر می تواند به درک روند کار کمک کند:
<script type="text/javascript">
function dateAlert(id){
var input_value = document.getElementById(id).value;
var input_date = new Date(input_value);
var today_date = new Date();

if (input_date.getTime() > today_date.getTime()) {
alert("هنوز زمان باقی است!");
} else {
alert("تاریخ گذشته است!");
}
}
</script>
<input type="text" id="input-id" value="2017,1,1">
<script type="text/javascript">
dateAlert('input-id');
</script>
نویسنده: آرتین
زمان: ۱۹:۵۱:۳۹ - تاریخ: ۱۳۹۷/۱۰/۱۳
سلام ممنون از سایت خوبتون
میخوام یه سایتی طراحی کنم که با استفاده از ساعت تصویر پس زمینه اش تغییر کنه یعنی در روز تصویر روز و در شب تصویر شب بیاد ممنون میشم راهنماییم کنید.
پاسخ: 
در نمونه کد زیر تغییر رنگ پس زمینه با توجه به زمان شب یا روز بودن برای بلاک با آی دی header انجام شده است که از همین الگو می توانید برای موارد مشابه (به فرض تگ body) استفاده کنید:
<style>
#header {
height: 200px;
width: 100%;
border: 1px solid #B5B5B5;
}
.day {
background: #35AAFF;
}
.night {
background: #F7272A;
}
</style>
<div id="header"></div>
<script>
function smartTemplate(){
var daynight = document.querySelector('#header');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();

if(hours < 6 || hours >= 18) {
//console.log('night');
daynight.classList.remove('day');
daynight.classList.add('night');
}

if(hours >= 6 && hours < 18) {
//console.log('day');
daynight.classList.remove('night');
daynight.classList.add('day');
}
}

//call function
smartTemplate();
</script>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




7 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی