|
In this tutorial,
I'll discuss how to calculate the difference between two dates using JavaScript.
The potential applications on this are many, from counting down to a particular
event, counting up from a past date, to dynamically indicating what's new on
your page. Sounds like fun!
Lets begin
this tutorial by getting to the heart of it:
Date.getTime()
is a prebuilt JS method that returns the time elapsed from January 1st, 1970
to the current Date instance, in milliseconds. And we all know the easiest
subjects to perform arithmetic on are numbers.
So
here's the general premise for calculating the difference between two dates-
1) Convert both dates to a number using Date.getTime()
2) Then subtract!
To
a few examples now.
-Calculating days remaining until Christmas:
<script type="text/javascript">
//Set the two dates
today=new Date()
var christmas=new Date(today.getFullYear(), 11, 25) //Month is 0-11 in
JavaScript
//Set 1 day in milliseconds
var one_day=1000*60*60*24
//Calculate difference btw the two dates, and convert to days
document.write(Math.ceil((christmas.getTime()-today.getTime())/(one_day))+
" days left until Christmas!")
</script>
Notice how the year for "Christmas" is
dynamically set to the current year, so the script is reusable now and in the
future as well without having to modify it. Our
annual events
countdown script uses this concept to count down to any annual event (ie:
a holiday, birthday etc) of your choosing.
-Dynamically indicating what's new on your page:
Moving
on, how about displaying a "new" image alongside new content that
will automatically disappear (the image, that is) after the specified future
date has been reached? The logic is simple enough- if the current date is less
than the specified future date, write out the "new" image:
var newimage='<img src="news.gif">'
var today=new Date()
function whatsnew(yr,mon,day){
var expire=new Date(yr,mon,day)
if (today.getTime()<=expire.getTime())
document.write(newimage)
}
<script> whatsnew(2003,11,30) </script> This is new
content!
-Calculating time expired since a particular
past date
Finally,
it's just as easy to count up as it is to count down. The following shows how
many days has elapsed since the launch of our site:
//Set the two dates
var millennium =new Date(1997, 5, 11) //Month is 0-11 in JavaScript
today=new Date()
//Get 1 day in milliseconds
var one_day=1000*60*60*24
//Calculate difference btw the two dates, and convert to days
document.write(Math.ceil((today.getTime()-millennium.getTime())/(one_day))
+
" days has gone by since JavaScriptKit.com started!")
It illustrates counting up from a date.
|