Preparing application...

Tutorial on creating local time without refreshing with JavaScript

In this article, we are going to teach you how to create a local time without refreshing with JavaScript and Ajax. Two points

65 Visit

If you have any questions, ask!

April 15, 2019

itroz

Description

In this article, we are going to teach you how to create a local time without refreshing with JavaScript and Ajax. Two points are important in this article. One is to display the local time, which means to display the time of the position you are in, and the second is to display the seconds counter without refreshing the screen. Stay with Itros .

Tutorial on creating local time without refreshing with JavaScript

Unfortunately, we did not find comprehensive and complete training in this regard in our web searches, so we decided to publish this training. There are many ways to get the local time through JavaScript, but we will explain the simplest and best method to you in this tutorial.

How to create a local time without refreshing with JavaScript

In the first step, as you can see in the codes below, to create and display the clock, we need to use the date() method to call the clock. After that, we use the toLocaleTimeString () function to call the local time. So far, by running the following code in the console, you can see that the local time is displayed without any problem.

var d = new Date();

var n = d.toLocaleTimeString();

console.log(n)

The point here is that when you refresh the page, the seconds counter changes, and without refreshing the page, the seconds counter is fixed. In order for the seconds counter to work without refreshing the page, we must use the setInterval method, which is the time method. How to execute the setInterval method is as follows

setInterval(

function(){

alert("Hello");

}, ۳۰۰۰);

As you can see in the codes above, this function is a function and you can write your desired command inside the function, then you specify the time for it. In the function above, we ordered the warning window with the text Hello to be displayed every three seconds. You can try these codes yourself.

So, so far you have learned how to create a local time 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 the time to one second, our clock will be automatically updated every second. In this way, our codes are written as follows. If you check with the IP change software, you will see that the clock changes when you connect to any country. We hope this article was useful and you can share your comments with us at the end 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 .

Source » Itroz Academy

Programming