Use js to display the current time example

Use js to display the current time example

This article mainly introduces how to use js to display the current time example. jquery is also used here, so you have to introduce it to the page.

Page front-end display

 

The Code is as follows:

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

 

 

Js script

 

The Code is as follows:

$ (Document). ready (function (){

// First

ShowTime ();

// Type 2

Var clock = new Clock ();

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

});

 

// Display the current time of the system. solution 1:

Function showTime (){

Var myArray = new Array (7 );

Var TD = new Date ();

MyArray [0] = "Sunday ";

MyArray [1] = "Monday ";

MyArray [2] = "Tuesday ";

MyArray [3] = "Wednesday ";

MyArray [4] = "Thursday ";

MyArray [5] = "Friday ";

MyArray [6] = "Saturday ";

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 ('current time: '+ new Date (). toLocaleDateString () + "" + myArray [weekday] + "" + hstr + ":" + mstr + ":" + istr );

SetTimeout (showTime, 1000 );

}

 

// Display the current time of the system. method 2

Function Clock (){

Var date = new Date ();

This. year = date. getFullYear ();

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

This. date = date. getDate ();

This. day = newArray ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday") [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 "the current time is:" + this. year + "year" + this. month + "month" + this. date + "day" + 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 );

};

}