Thursday, November 17, 2011

How to show a running date and time clock in your website.

Using Ajax, I created a simple script that will show a running date and time clock in the website. Basically, the function will get the actual date and time of the server, then set a time out that loop in every second.

To get the date and time, you can initialize it by Date() object.

var today = new Date();


From there, you can get the date and time, please see below for the object methods that you can call.

var cmonth = today.getMonth(); // this will return the index of the month[0-11]
var cyear = today.getFullYear(); // this will return the year in 4 digits
var cday = today.getDate();
var chour = today.getHours();
var cmin = today.getMinutes();
var csec = today.getSeconds();


As for the complete implementation, please see below.

<html>
<head>
        <title>Hotel Aide</title>
        <script type="text/javascript">
        function updateTime() {
                var today = new Date();
                var month = new Array(12);
                month[0]="Jan";
                month[1]="Feb";
                month[2]="Mar";
                month[3]="Apr";
                month[4]="May";
                month[5]="Jun";
                month[6]="Jul";
                month[7]="Aug";
                month[8]="Sep";
                month[9]="Oct";
                month[10]="Nov";
                month[11]="Dec";

                var cmonth = month[today.getMonth()];
                var cyear = today.getFullYear();
                var cday = today.getDate();
                var chour=today.getHours();
                var cmin=today.getMinutes();
                var csec=today.getSeconds();

                if (chour<10) chour = "0"+chour;
                if (cmin<10) cmin = "0"+cmin;
                if (csec<10) csec = "0"+csec;

                document.getElementById('datetime').innerHTML= cmonth+' '+cday+', '+cyear+' '+chour+':'+cmin+':'+csec;
                window.setTimeout('updateTime();',1000);
        }
        </script>
</head>
<body onLoad="updateTime();">
        <span id="datetime"></span>
</body>
</html>


Hope this is helpful! Thanks!

No comments:

Post a Comment

Leadership 101


  • Leadership demands sacrifices for the near-term to receive lasting benefits. the longer we wait to make sacrifices, the harder they become. Successful people make important decisions early in their life, then manage those decisions the rest of their lives.
  • Growth does not happen by chance. If you want to be sure to grow, you need a plan something strategic, specific, and scheduled. it's a discipline that would need incredible determination from us.
  • Success comes by going the extra mile, working the extra hours, and investing the extra time. The same is true for us. If we want to get to excel in any segment of life, a little extra effort can help. Our efforts can go a long way if we only work a little smarter, listen a little better, push a little harder, and persevere a little longer.
  • Making a difference in your work is not about productivity; it's about people. When you focus on others and connect with them, you can work together to accomplish great things.
  • Envision a goal you'd like to reach. Make it big enough to scare you a little. Now write down a plan for moving toward it. Create mini-goals within the big goal, to set yourself up for continual progress. And include some risks, too. Set yourself up for success.
  • Leaders build margins, not image. A leader may be forced to take unpopular stands for the good of the company. Popularity isn't bad, but decisions made solely on the basis of popular opinion can be devastating. So take courage and make the right though sometimes painful choices.