SetInterval and settimeout implement page dynamic clock

Let's look at the difference between the settimeout () and the SetInterval () method.

The settimeout () method is used to call a function or evaluate an expression after a specified number of milliseconds.

The SetInterval () method can call a function or a calculation expression in the specified period (in milliseconds).

The SetInterval () method keeps calling the function until the clearinterval () is called or the window is closed.

The ID value returned by SetInterval () can be used as an argument to the Clearinterval () method.

The difference is that settimeout () executes only once after a specified time, and setinterval () executes repeatedly after a specified time.

Using their two methods to set the dynamic clock, setinterval only need to set up once, the system will automatically be executed after 1s;

and settimeout () need to manually (set the code) continuously in the 1s call to display the time function, to the user feel is automatically executed.

Let's look at the effect chart: Every second of the page, the time is beating

The code is as follows:

Very simple three blocks. Not even CSS styles are one by one.

<button id= "Tstart" onclick= "Tstart ()" > Start </button> <button id= "tstop"
onclick= "Tstop ()" > Pause </button>      
<div id= "Ttime" > </div>

Gets the current time and initializes the time format:

var Showtime;
    Initialization time
    function Inittime () {
    	var date=new date ();
        var gyear=date.getfullyear ();
        
        This gets the month time to manually add 1, because in the date () built-in function, the month default 0月-November
        var gmon=date.getmonth () +1;
        var gdate=date.getdate ();
        var ghour=date.gethours ();
        var gmin=date.getminutes ();
        var gsecond=date.getseconds ();
        
        Gmon=checktime (Gmon);
        Gdate=checktime (gdate);
        Ghour=checktime (ghour);
        Gmin=checktime (gmin);
        Gsecond=checktime (Gsecond);
        
        var showtime=gyear+ "-" +gmon+ "-" +gdate+ "  " +ghour+ ":" +gmin+ ":" +gsecond;
        " return Showtime;
    	}
    
   Validation year month, this is not too necessary, just for format unification, because by default, the effect is 16:5:3
    function checktime (i) {
        if (i<10) {
            i= "0" +i;
        }
        return i;
    }

Here is the code to set the time with SetInterval (): Compare later

Displays the time
    function Timeact () {
        var thetime=inittime () in a div block;
        document.getElementById ("Ttime"). Innerhtml=thetime
    }
   The function is set to be executed every 1s, and the timer is assigned to a variable, which makes it easy to call
    var t = setinterval ("Timeact ()", 1000);
    
   Pauses the current time, using the method of clearing the timer
   function tstop () {
        clearinterval (t);
    }
   Continue the timer, reopen the timer
    function Tstart () {      
    	setinterval ("Timeact ()", 1000);
    }

Let's look at the settimeout () method

The callback itself     realizes the clock
function timeact () {
	var thetime=inittime () with settimeout dynamic display.
	document.getElementById ("Ttime"). Innerhtml=thetime;
	 Call itself function 
	t=settimeout (timeact,1000);
}
    There must be a manual call to display the time function
    timeact ();
    
    Clear Timer
    function Tstop () {
        cleartimeout (t);
    }
    Re-open Timer
	function Tstart () {
	    settimeout (timeact,1000);
	}

The code differs in only a few lines, and settimeout () needs to call itself in the function that displays the time, and then manually execute it once in <script></script>.