Hi friends..
Am post simple javascript animated clock
Ok lets come!
Am explain Javascript Data object and some important methods in Date objects.
How to create Date Objects?
Date objects are java script bulit-in objects. am explain previous post Javascript object please refer...
var d=new Date( );
If you print 'd' value. It returns following output
Wed Mar 06 2013 18:46:21 GMT+0530 (India Standard Time)
It returns date,time all details. if you want date only you can split value using date object methods.am here explain some important methods only
Important methods in Date objects
getDay( );
getMonth( );
getFullYear( );
getHours( );
getMinutes( );
getSeconds( );
getMilliseconds( );
For Example. we want Hours only write following method,
var a=new Date();
var d=a.getDay();
var m=a.getMonth();
var y=a.getFullYear();
var h=a.getHours();
var s=a.getSeconds();
var mm=a.getMinutes();
var mmm=a.getMilliseconds();
Step 1:
First we create output will display the part in HTML.
<body>
<div id="result"></div>
</body>
Step 2:
You may call body onload event attribute like
<body onload="AnimatedClock()">
<div id="result"></div>
</body>
Am post simple javascript animated clock
Ok lets come!
Am explain Javascript Data object and some important methods in Date objects.
How to create Date Objects?
Date objects are java script bulit-in objects. am explain previous post Javascript object please refer...
var d=new Date( );
If you print 'd' value. It returns following output
Wed Mar 06 2013 18:46:21 GMT+0530 (India Standard Time)
It returns date,time all details. if you want date only you can split value using date object methods.am here explain some important methods only
Important methods in Date objects
getDay( );
getMonth( );
getFullYear( );
getHours( );
getMinutes( );
getSeconds( );
getMilliseconds( );
For Example. we want Hours only write following method,
var a=new Date();
var d=a.getDay();
var m=a.getMonth();
var y=a.getFullYear();
var h=a.getHours();
var s=a.getSeconds();
var mm=a.getMinutes();
var mmm=a.getMilliseconds();
Methods
|
Return value
|
getDay()
|
Its returns 0-30
|
getMonth()
|
Its returns 0-11
|
getFullYear()
|
Its returns current year
|
getHours()
|
Its returns 0-23
|
getMinutes()
|
Its returns 0-59
|
getSeconds()
|
Its returns 0-59
|
getMilliseconds()
|
Its returns 0-999
|
Step 1:
First we create output will display the part in HTML.
<body>
<div id="result"></div>
</body>
Step 2:
You may call body onload event attribute like
<body onload="AnimatedClock()">
<div id="result"></div>
</body>
Step 3:
Write the script in <head></head> tag in following way
<head>
<script type="text/javascript">
function AnimatedClock()
{
}
</script>
</head>
Step 4:
You create object in Date object and split hours and seconds and minutes in following way
<head>
<script type="text/javascript">
function AnimatedClock()
{
var a=new Date();
var h=a.getHours();
var s=a.getSeconds();
var m=a.getMinutes();
}
</script>
</head>
Step 5:
And concat the all values using + operator. and print the HTML document. like
<head>
<script type="text/javascript">
function AnimatedClock()
{
var a=new Date();
var h=a.getHours();
var s=a.getSeconds();
var m=a.getMinutes();
document.getElementById("result").innerHTML=h+":"+m+":"+s;
}
</script>
</head>
Step 6:
Done in 80 %.. if run your script the current hours and minutes and seconds displayed. but not animated....
Step 7:
If you want animate using time event. there are two main event setInterval and setTimeout...Am using setTimeout like below codes
<head>
<script type="text/javascript">
function AnimatedClock()
{
var a=new Date();
var h=a.getHours();
var s=a.getSeconds();
var m=a.getMinutes();
document.getElementById("result").innerHTML=h+":"+m+":"+s;
setTimeout("AnimatedClock()",1000);
}
</script>
</head>
Step 8:
Done!
Souce code:
<html>
<head>
<script type="text/javascript">
function AnimatedClock()
{
var a=new Date();
var h=a.getHours();
var s=a.getSeconds();
var m=a.getMinutes();
document.getElementById("result").innerHTML=h+":"+m+":"+s;
setTimeout("AnimatedClock()",1000);
}
</script>
<style>
#result
{
padding:10px;
background-color:#000000;
color:#FFFFFF;
width:125px;
height:40px;
font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<title>Untitled Document</title>
</head>
<body onload="AnimatedClock()">
<div id="result"></div>
</body>
</html>
Output is:
Note:
This only animated current time(h,s,m). If you want 00:00:00 this method... apply logic and AM or PM
In this exmple am not using logic.If you want logic codes i will post next sessions
I hope its useful to you!
See next lession
Thanks!
