Project Structure:
Running effect:
========================================================== ========================
Code Section:
========================================================== ========================
/Clock/WebContent/index. jsp
Copy codeThe Code is as follows:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %>
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + "://"
+ Request. getServerName () + ":" + request. getServerPort ()
+ Path + "/";
%>
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Base href = "<% = basePath %>"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
</Head>
<Body>
<Span id = "clock"> </span>
</Body>
<Script type = "text/javascript" src = "<% = basePath %> js/clock. js" charset = "UTF-8"> </script>
</Html>
/Clock/WebContent/js/clock. js
Copy codeThe Code is as follows:
/**
* Time Display
* @ Date 2012-12-31
* @ Author hongten (hongtenzone@foxmail.com)
*
* @ Returns
*/
Function Clock (){
Var date = new Date ();
This. year = date. getFullYear ();
This. month = date. getMonth () + 1;
This. date = date. getDate ();
This. day = new Array ("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 ();
// Date: 2012-12-31-17:03:18 Monday
This. toString = function (){
Return "Date:" + this. year + "-" + this. month + "-" + this. date + "-" + this. hour + ":" + this. minute + ":" + this. second + "" + this. day;
};
// 2012-12-31
This. toSimpleDate = function (){
Return this. year + "-" + this. month + "-" + this. date;
};
// 2012-12-31 17:04:03
This. toDetailDate = function (){
Return this. year + "-" + this. month + "-" + this. date + "" + this. hour + ":" + this. minute + ":" + this. second;
};
This. display = function (ele ){
Var clock = new Clock ();
Ele. innerHTML = clock. toString ();
Window. setTimeout (function (){
Clock. display (ele );
},1000 );
};
}
// <Span id = "clock"> </span>
Var clock = new Clock ();
Clock. display (document. getElementById ("clock "));
I personally think this is very practical in the web... So I recommend it to you...