使用js顯示目前時間樣本

使用js顯示目前時間樣本

 這篇文章主要介紹了使用js顯示目前時間樣本,這裡也用到了jquery，讓得把它也要引入到頁面中

頁面前台顯示

 

 代碼如下:

<span id="clock" style="font-size:14px;"></span>

 

 

js指令碼

 

 代碼如下:

$(document).ready(function () {

//第一種

showTime();

//第二種

var clock = new Clock();

clock.display($("#clock"));

});

 

//顯示系統目前時間處理 第一種方法 

function showTime() {

 var myArray = new Array(7);

 var TD = new Date();

 myArray[0] = "星期日";

 myArray[1] = "星期一";

 myArray[2] = "星期二";

 myArray[3] = "星期三";

 myArray[4] = "星期四";

 myArray[5] = "星期五";

 myArray[6] = "星期六";

 weekday = TD.getDay();

 var h = TD.getHours();

 var m = TD.getMinutes();

 var s = TD.getSeconds();

 var hstr = h;

 var mstr = m;

 var istr = s;

 if (h < 10) { hstr = "0" + h };

 if (m < 10) { mstr = "0" + m };

 if (s < 10) { istr = "0" + s };

 $("#clock").innerHTML('目前時間：' + new Date().toLocaleDateString() + " " + myArray[weekday] + " " + hstr + ":" + mstr + ":" + istr);

 setTimeout(showTime, 1000);

}

 

//顯示系統目前時間處理 第二種方法

function Clock() {

var date = new Date();

this.year=date.getFullYear();

this.month=date.getMonth()+1;

this.date=date.getDate();

this.day=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()];

this.hour=date.getHours()<10?"0"+date.getHours():date.getHours();

this.minute=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();

this.second=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();

 

this.toString=function(){

return"現在時間是:"+this.year+"年"+this.month+"月"+this.date+"日"+this.hour+":"+this.minute+":"+this.second+""+this.day;

};

 

this.toSimpleDate=function(){

returnthis.year+"-"+this.month+"-"+this.date;

};

 

this.toDetailDate=function(){

returnthis.year+"-"+this.month+"-"+this.date+""+this.hour+":"+this.minute+":"+this.second;

};

 

this.display=function(ele){

varclock=newClock();

ele.innerHTML=clock.toString();

window.setTimeout(function(){clock.display(ele);},1000);

};

}