How to create Changeable Date and Time Using JavaScript?

الاثنين، 2 فبراير 2015

How to create Changeable Date and Time Using JavaScript?

بواسطة: 11:09 م أضف تعليق
You can create changeable Date and Time using JavaScript Date object. JavaScript Date object will automatically hold the current date and time as its initial value. You can manipulate it easily by using different methods in Date object. The different methods in Date object I am going to use to create changeable Date and Time are as follows.

  • Date():    Returns today's date and time.
  • getDate(): Returns the day of the month from a Date object from 1-31.
  • getDay():  Returns the day of the week from a Date object from 1-6
  • getMonth():Returns the month from a Date object from 0-11
  • getFullYear(): Returns the year, as a four digit number from Date object.
  • getHours():   Returns the hour of a Date object from 0-23.
  • getMinutes(): Returns the minutes of a Date object from 0-59
  • getSeconds(): Returns the seconds of a Date object from 0-59

Do do rest of the work you have to create a new Date() object and needs to use that value to get date, month, day name and time with hours, minutes and seconds. You can create variables for day, month and year as follows.

var now=new Date();
var today=now.getDate();
var month=now.getMonth();
var year=now.getFullYear();
var day=now.getDay();

You can create variables for hours, minutes and seconds as follows.

var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();

After getting month and day in number format, you can change it into name of the month and day by using the arrays as follows.

var monthname=new Array(12)
monthname[0]="January ";
monthname[1]="February ";
monthname[2]="March ";
monthname[3]="April ";
monthname[4]="May ";
monthname[5]="June ";
monthname[6]="July ";
monthname[7]="August ";
monthname[8]="Septmber ";
monthname[9]="October ";
monthname[10]="November ";
monthname[11]="December ";

var dayname=new Array(7)
dayname[0]="Sunday ";
dayname[1]="Monday ";
dayname[2]="Tuesday ";
dayname[3]="Wednesday ";
dayname[4]="Thrusday ";
dayname[5]="Friday ";
dayname[6]="Saturday ";


Full HTML Code to Create Changeable Date


Here is a full HTML code to create changeable date, you can use these codes to display full date or you can customize to display in different format on your web page.

<html>
<body>
<script type="text/javascript">
function displayDate(){
var now=new Date();
var today=now.getDate();
var month=now.getMonth();

var monthname=new Array(12)
monthname[0]="January ";
monthname[1]="February ";
monthname[2]="March ";
monthname[3]="April ";
monthname[4]="May ";
monthname[5]="June ";
monthname[6]="July ";
monthname[7]="August ";
monthname[8]="Septmber ";
monthname[9]="October ";
monthname[10]="November ";
monthname[11]="December ";

var year=now.getFullYear();
var day=now.getDay();

var dayname=new Array(7)
dayname[0]="Sunday ";
dayname[1]="Monday ";
dayname[2]="Tuesday ";
dayname[3]="Wednesday ";
dayname[4]="Thrusday ";
dayname[5]="Friday ";
dayname[6]="Saturday ";

document.write(monthname[month]+today+  ",   "+year+  "  "+dayname[day]);
}
window.onload=displayDate();
</script>
</body>
</html>

Preview of Date Displayed:


Full HTML Code to Create Changable Time


Here is a full HTML code to create changeable time, you can use these codes to display full time or you can customize to display in different format on your web page. You can use these codes to create digital clock using JavaScript, which I have already posted in my previous post.

<html>
<head></head>
<body>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var ap="AM";

//to add AM or PM after time

if(h>11) ap="PM";
if(h>12) h=h-12;
if(h==0) h=12;

//to add a zero in front of numbers<10

m=checkTime(m)
s=checkTime(s)

document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap
t=setTimeout('startTime()', 500)
}

function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}

window.onload=startTime;

</script>

<div id="clock"></div>
</body>
</html>

Preview of Time Displayed:




Related Posts:

0 التعليقات: