Javascript practice to develop a simple clock on a web page. We are going to create a digital clock with Javascript that shows the hours, minutes and seconds and is constantly updated.
We are going to see a practical workshop on Javascript with which we will be able to include a clock on our website. It is a simple script, which we can place just by cutting and pasting, although we will try to explain it a bit for those who are able to understand Javascript.
It is a digital clock that shows the hours, minutes and seconds. It will be very simple on purpose, so that we can understand the exercise well. Then we’ll complicate it a bit more to give it some showiness.
build the form
We start by placing the text field where the clock will be displayed. We must place a small form where we will only have a text field.
There shouldn’t be any problem in these lines of HTML. We just put the start and end tags of the form and inside a text field. We assign a name to both the form and the text field and then access them by that name using Javascript.
Function to update the clock value
We need to build a function that takes the system time and displays it in the text field.
To take the time we are going to use the Javascript Date object.
currentMoment = new Date()
If we create a new instance of the Date object without passing parameters to it, it is initialized to the current date and time.
Then we have to obtain from that Date instance what we are interested in, which is the hour, the minutes and the seconds. We do this using the corresponding methods of the Date object.
hour = currentMoment.getHours() minute = currentMoment.getMinutes() second = currentMoment.getSeconds()
Now we combine the results to build the time in the format we want.
var printableTime = hour + ” : ” + minute + ” : ” + second
Finally, we place the current value of the time in the text field of the form.
document.form_clock.clock.value = printableTime
For now the function looks like this:
function moveClock(){ currentMoment = new Date() hour = currentMoment.getHours() minute = currentMoment.getMinutes() second = currentMoment.getSeconds() printableHour = hour + ” : ” + minute + ” : ” + second document.form_clock .clock.value = printableTime }
The function must call itself
With these lines of code we get the time and update it in its text field, but it’s not all done, we need that function to be called constantly and every second so that it updates the value of our text field constantly as well.
For this, the best thing is that the function is also in charge of calling itself after a second, so it will do the whole process of obtaining and updating the time again and finally it will call itself after a second. . This process will be repeated forever until we leave the page.
The line of code to call itself, which we will place in the last line of the function, is the following:
setTimeout(“moveClock()”,1000)
The setTimeout function is used to make the delay before executing the sentence. The statement is a simple function call and the delay is 1000 milliseconds (one second).
start the clock
We finally need to get the clock ticking. We can do this once the page has finished loading with the onload event handler, which is placed in the
.This means that when the page is finished loading, the function moveClock() is called, which will be in charge of moving the clock and calling itself to carry out the process continuously.
integer code
The page code looks like this:
Javascript clock improvements
We can do many things to improve aspects of this watch. For example, give the text field some style or make it so that no one can hover over the text field to manually update the time value. Let’s see something.
style to the clock
With style sheets we can change the appearance of the clock to make it a little more special. This is an example of what could be put.
Prevent them from accessing the text field
This way no one will be able to modify the text of the clock manually. We got it with Javascript. The onfocus event handler is fired when the text field acquires the focus of the application. At that point we will remove the focus from the application with the blur() method. The button would look like this:
Make that we always have two digits in the hour minutes and seconds.
In order to get the time to always have a hh : mm : ss format, we have to play a bit with the time values as if they were strings. To do this, the first thing we will have to do is build a string from the value (hour, minute or second) that we want to format. Then we’ll look at that string to see if we need to add a digit to the value.
Let’s see how we obtain the string from the number of seconds obtained. We do it for the seconds, the hour and the minutes will be done in a similar way.
str_second = new String(second)
Next we see if we have a single character in the string, because if so we have to concatenate a zero (“0”) at the beginning.
if (str_second.length == 1) second = “0” + second
Full code of the page with the Javascript clock
Let’s take another look at our example in one piece to see how all of these improvements look.
Facebook Comments
Disqus