1. Overview
When browsing many websites, you will find that the function of displaying the current system time is added to the website. Displaying the current system time on the web page not only makes it convenient for viewers to grasp the current time, but also beautify the web page.
2. Technical points
Implementation using Date objects. First, create a Date() object representing the current system time, and then obtain the values of the year, month, day, hour, minute, second and week of the current system time through the getXxx() method of the Date object. Next, combine the obtained values into a date and time string, and set the date and time string to the content of the <div> tag. Finally, use the setTimeout() function of the window object to call a function that displays the system time in real time every 1 second.
3. Specific implementation
(1) Create a new index.jsp page and write a JavaScript function that displays system time in real time. The key code is as follows:
/***Real-time display of system time*/function getLangDate(){var dateObj = new Date(); //Date object representing the current system time var year = dateObj.getFullYear(); //The full year value of the current system time var month = dateObj.getMonth()+1; //The month value of the current system time var date = dateObj.getDate(); //The day of the current system time var day = dateObj.getDay(); //The day of the current system time var weeks = ["Sunday", "Monday", "Tuesday", "Thursday", "Friday", "Saturday"]; var week = weeks[day]; //From the week value, get the corresponding week string from the array var hour = dateObj.getHours(); //The hour value of the current system time var minute = dateObj.getMinutes(); //The minute value of the current system time var second = dateObj.getSeconds(); //The second value of the current system time //If the values of month, day, hour, minute, and second are less than 10, add 0if(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 Announcement: [ "+newDate+" ]";setTimeout("getLangDate()",1000);//Recall this function every 1 second}(2) The JavaScript function written in the onload event loading step (1) in the page <body> tag, and the <div> tag is added to the appropriate position of the page, with the id "dateStr". The key code is as follows:
<body onLoad="getLangDate()"><div id="dateStr"></div></body>
When real-time display of system time, you can also use the setIntervar() method of the window object. The setInterval() method is similar to the setTimeout() method.
The difference is that after calling the setIntervar() method of the window object, the JavaScript method called by the setIntervar() method will be executed all the time, while the setTimeout() method can only be executed once. If you want to execute a JavaScript method through the setTimeout() method, setTimeout() must be written in the called JavaScript method.
The above is the relevant knowledge introduced to you by the editor on real-time display of system time based on JS code. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!