You can use the toLocaleString() to get the local time from the computer internal clock. The following script prints the date and time to the screen:
cDate = new Date();
- create a new date object
document.write("Local time: '"+ cDate.toLocaleString());
- print the date using the .toLocaleString() method
- prints the month, day, year followed by the time in hours:minutes:seconds in 24 hour format
You can also use the following methods:
Here is an example to add a clock to a web page:
function clock() {
- a new function called clock()
cDate = new Date();
cHours = cDate.getHours();
cMinutes = cDate.getMinutes();
cSeconds = cDate.getSeconds();
semi = " : "
document.form1.text1.value = cHours + semi + cMinutes + semi + cSeconds
setTimeout("clock()", 1000);
}
- create a date object
- get the hours
- get the minutes
- get the seconds
- semicolon for printing
- put the time into the text field called text1
- call the same function (clock()) every 1000 milliseconds
In order to use the function described above you need to call it. The easiest way to call this function is when the page loads. Add the following HTML code just after the the word BODY in the body tag: onload="clock()". Your tag may look like this: <BODY onload="clock()"> or this: <BODY BGCOLOR="#FFFFFF" onload="clock()">
'setTimeout' makes sure the function keeps running once it is started.
Of course you will need to add the form and text field into your web page.
Debugging
Unlike other programming languages, JavaScript is written without an IDE (Integrated Development Environment). When you make an error in your code it may be difficult to find. Here are some helpful hints.
Keep your screen resolution reasonable, larger print, so that small colons, commas etc. are easier to see.
Copy and paste code whenever possible.
Start simple. Do one thing at a time. Then run the code by previewing your page in Internet Explorer to see if it works. Then add the next bit and test it again.
You can use the Console inside of Chrome's Developers Tools flyout to spot some errors. Try it out. Make deliberate mistakes in code you know works and then see if IE catches them.
<p id="demo">JavaScript can change HTML content.</p></h1>
<script>
var counter = 0;
setInterval(function() { // Call a function repetatively with 1 Second interval
document.getElementById("demo").innerHTML = counter + " seconds";
counter++;
}, 1000); //1 Second update rate
</script>
The example on the left shows another way to cause a script to repeat. The previous example used setTimeout and this one uses setInterval with the function definition all included within the call.
Instead of writing our output to a text box this time the output goes to a paragraph with the id "demo".
This example starts a timer showing the elapsed seconds since the page was loaded.
Practice
Job 61: Work with a partner. You and your partner are to create one or two errors in a JavaScript, each. Send the HTML page containing the script with error(s) to your partner and vise-versa. Write a report using a text editor, explaining how you debugged the script.
Job 62: Modify the clock script above to display the time in 12 hour format with AM and PM indicated.
Job 63: Display a message for about 5 seconds out of every minute starting when seconds = 0.