Working with time

Along with the date components, the Date object stores time information as well. The following methods provide access to a Date object's time information:

  • getHours Returns the hour portion of the time.
  • getMinutes Returns the minutes portion of the time.
  • getSeconds Returns the seconds portion of the time.
  • getMilliseconds Returns the milliseconds portion of the time.
  • getTime Returns the number of milliseconds since midnight January 1, 1970.
  • getTimezoneOffset Returns the difference in minutes between local time and Greenwich Mean Time (GMT).
  • getUTCHours Returns the hour portion of the time according to UTC.
  • getUTCMinutes Returns the minutes portion of the time according to UTC.
  • getUTCSeconds Returns the seconds portion of the time according to UTC.
  • getUTCMilliseconds Returns the milliseconds portion of the time according to UTC.
As previously demonstrated, you can initialize a Date object by passing in the hours, minutes, and seconds, but the milliseconds property is set via the setMilliseconds method. This JavaScript displays the current time:
<script language="javascript">
var d = new Date();
document.write(d.getHours() + ":" + d.getMinutes() + ":"
  + d.getSeconds() + ":" + d.getMilliseconds());
document.write(d.getTime());

</script>
It displays the following output:
12:36:33:41

1146760593041
The second value is a bit odd since it displays the number of milliseconds since January 1, 1970 to the value stored in the referenced Date object. It comes in handy when finding the difference between two values. As with date values, a setTime method is available as well:
Var dt1 = new Date();
var dt2 = new Date(1970, 4, 15);

dt1.setTime(dt2.getTime());
Setting properties
Like the setTime, setDate, and setMilliseconds methods, there are methods to populate all portions of a Date object. This includes the following:
  • setFullYear
  • setHours
  • setMinutes
  • setMilliseconds
  • setMonth
  • setSeconds
  • setUTCFullYear
  • setUTCMonth
  • setUTCHours
  • setUTCSeconds
  • setUTCMilliseconds
These methods allow you to easily reset a date property by passing in its new value. It's good to be able to work with and display dates, but there will be times when you need to perform calculations with dates and so forth.

Do you need help with Web Technologies? Gain advice from Builder AU forums

Related links

Comments

1

Sudip Dey - 05/03/08

codes are simple to understand....also give code which autorefresh the time....
I need your comments also....

<html>
<head>
<title>Digital Clock</title>
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
</head>

<body>
<span id="digitalclock" class="styling"></span>

<script>
<!--

/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>
</body>
</html>

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

1

Sudip Dey - 03/05/08

codes are simple to understand....also give code which autorefresh the time.... I need your comments also.... <html> <head> <title>Digital Clock</title> <style> <!-- .styling{ background-color:black; color:lime; font: bold 15px MS Sans ... more

Log in


Sign up | Forgot your password?

  • Staff Shadow chasing in browsers

    The punching and counterpunching continued in the ongoing web browser development bout. Each time one browser closes a feature gap, a new feature appears in one of the others -- how we ever put up with the years of browser stagnation, I'll never know. Read more »

    -- posted by Staff

  • Chris Duckett Safari gets Gears

    Since its release in May last year, Gears has supported only Internet Explorer and Firefox browsers. With the addition of Safari into the Gears fold, it closes the loop of major browsers to support Gears Read more »

    -- posted by Chris Duckett

  • Renai LeMay MyPerfect.com.au has potential

    Victorian Web start-up My Perfect has a strong story and rationale for why it will succeed. But it has to overcome some challenges and design flaws first. Read more »

    -- posted by Renai LeMay

What's on?