setInterval与setTimeout实现页面动态时钟

先来看看setTimeout（）与setInterval（）方法的区别。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

区别就是setTimeout()只在指定时间之后执行一次，setInterval()则会在指定时间后反复执行。

用他们两个方法来设置动态时钟，setInterval只需要设置一次，系统便会自动在1s之后执行；

而setTimeout()需要手动（设置代码）不断地在1s后调用显示时间的函数，给用户感觉就是在自动执行。

下面先看效果图：在页面上每一秒时间都在跳动

代码如下：

很简单的三个块。连css样式都没有 一 一。

<button id="Tstart" onclick="Tstart()"> 开始</button>
<button id="Tstop" onclick="Tstop()"> 暂停</button>      
<div id="Ttime" > </div>

获取当前时间，并初始化时间格式：

var showtime;
    //初始化时间
    function initTime(){
    	var date=new Date();
        var gYear=date.getFullYear();
        
        //这里获取月份时候要手动加1，因为在Date()内置函数中，月份默认0-11月
        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;
    	}
    
   //验证年月份，这个不是太必要，只是为了格式统一，因为默认的话，效果是16:5:3
    function checkTime(i){
        if(i<10){
            i="0"+i;
        }
        return i;
    }

//在div块中显示时间
    function timeAct(){
        var theTime=initTime();
        document.getElementById("Ttime").innerHTML=theTime;
    }
   //设置每隔1s执行一次该函数，并将该定时器赋值给一个变量，方便后面调用
    var t = setInterval("timeAct()",1000);
    
   //暂停当前时间，用清除定时器的方法
   function Tstop(){
        clearInterval(t);
    }
   //继续计时，重新开启定时器
    function Tstart(){      
    	setInterval("timeAct()",1000);
    }

再来看看setTimeout()方法

//通过回调本身     实现用setTimeout动态显示时钟
function timeAct(){
	var theTime=initTime();
	document.getElementById("Ttime").innerHTML=theTime;
	 //调用本身函数 
	t=setTimeout(timeAct,1000);
}
    //这里必须手动调用一次显示时间的函数
    timeAct();
    
    //清除定时器
    function Tstop(){
        clearTimeout(t);
    }
    //重新开启定时器
	function Tstart(){
	    setTimeout(timeAct,1000);
	}