Tutorial on creating local time without refreshing with JavaScript

In this article, we intend to introduce you to how to create a local time without refreshing using JavaScript and Ajax.

Two points are important in this article.

One is to display the local time, meaning to display the time of the location you are in, and the second is to display the seconds without refreshing the page. Stay with itroz.

Learn how to create a local time without refreshing with JavaScript

Unfortunately, in our web searches, we did not find a comprehensive and complete tutorial on this topic, so we decided to publish this tutorial.

There are various ways to get the local time through JavaScript, but in this tutorial we will explain the simplest and best method.

How to create local time without refreshing with JavaScript

In the first step, as you can see in the code below, to create and display the clock, we need to use the ()date method to call the clock.

Then we use the ()toLocaleTimeString function to retrieve the local time. So far, by executing the following code in the console, you can see that the local time is displayed without any problems.

var d = new Date();

var n = d.toLocaleTimeString();

console.log(n)

The point is that when you refresh the page, the seconds count changes and without refreshing the page, the seconds count is fixed. In order for the seconds count to work without refreshing the page, we need to use the setInterval method, which is a time method. The way to implement the setInterval method is as follows

setInterval(

function(){

alert("Hello");

}, ۳۰۰۰);

As you can see in the code above, this function takes a function and you can write your desired command inside the function and then specify the time for it.

In the above function, we have instructed the alert window to display the text Hello every three seconds. You can try these codes yourself.

So, so far you've learned how to create a local clock and how to create a counter. Now it's time to combine the two.

If we put the clock function inside the counter method and set its time to one second, our clock will automatically update every second.

Thus, our codes are written as follows. If you check with the IP change software, you will see that the time changes with each country connection.

We hope this article was useful and you can share your comments with us at the bottom of this page.

setInterval(

function(){

var d = new Date();

var n = d.toLocaleTimeString();

document.getElementById("demo").innerHTML = n;}, 1000);

To view the local time project online without refreshing with JavaScript, click to view it on Codepen.io Itroz.

Source » Itroz Academy