When browsing a lot of websites, will find in the site to include the display of the current system time function, in the Web page display the current system time, not only can be convenient for visitors to grasp the current time, but also beautify the Web page.
2. Technical HighlightsUse the Date object to implement. You first create a date () object that represents the current system time, and then use the GetXXX () method of the Date object to get the year, month, day, hour, minute, second, and week values for the current system time, and then combine the obtained values into a datetime string and set the DateTime string as The contents of the <div> tag, and finally a function that displays the system time in real time every 1 seconds through the settimeout () function of the Window object.
3. Concrete implementation(1) Create a new index.jsp page and write a JavaScript function that displays the system time in real time, with the following key codes:
/*** Real Time display system time*/function Getlangdate () {var dateobj=NewDate ();//a Date object that represents the current system timevar year = Dateobj.getfullyear ();//full year value for current system timevar month = Dateobj.getmonth () +1;//the month value of the current system timevar date = Dateobj.getdate ();//Day of the month in the current system timevar day = Dateobj.getday ();//the week value in the current system timevar weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; Var week= Weeks[day];//gets the corresponding week string from the array, based on the week valuevar hour = dateobj.gethours ();//the current time of the system is a small valuevar minute = Dateobj.getminutes ();//minute value of current system timevar second = Dateobj.getseconds ();//the second value of the current system time//if the value of month, day, hour, minute, second is less than 10, the preceding 0 if(month<10) {Month= "0" +month; } if(date<10) {Date= "0" +date; } if(hour<10) {Hour= "0" +hour; } if(minute<10) {minute= "0" +minute; } if(second<10) {Second= "0" +second; } var newdate= year+ "Year" +month+ "month" +date+ "Day" +week+ "" +hour+ ":" +minute+ ":" +second; document.getElementById ("Datestr"). InnerHTML = "System bulletin: [" +newdate+ "]"; SetTimeout ("Getlangdate ()", 1000);//call the function again every 1 seconds}
(2) In the Page <body> tab through the OnLoad event loading step (1) written in the JavaScript function, and in the appropriate location of the page to add the <div> tag, the ID of "DATESTR", the key code is as follows:
<body onload= "getlangdate ()" > class= "Word_grey" ></div></body>
You can also use the Setintervar () method of the Window object when implementing real-time display system time, which is similar to the settimeout () method of the SetInterval () method. The difference is that the JavaScript method called by the Setintervar () method is always executed after the Setintervar () method of the Window object is called, and the SetTimeout () method can only be executed once. If you want to execute a JavaScript method all the way through the SetTimeout () method, SetTimeout () must be written in the called JavaScript method body.
Real time display of system time
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
