Of Stack

Real time display of system time based on JS code

  • 2021-06-28 10:50:28
  • OfStack

1. Overview

When browsing many websites, you will find that the function of displaying the current system time has been added to the website. Displaying the current system time in the web page not only makes it easy for the browser to master the current time, but also beautifies the web page.

2. Technical Essentials

Implemented using the Date object.First, an Date () object representing the current system time is created, then the values of the year, month, day, hour, minute, second and week of the current system time are obtained using the getXxx () method of the Date object. Next, the values are combined into a date-time string and the date-time string is set to < div > The contents of the tag, and finally, a function that displays the system time in real time is called every 1 second by the setTimeout() function of the window object.

3. Specific implementation

(1) Create a new index.jsp page, write the JavaScript function to display the system time in real time, the key code is as follows: 


/**
* Real-time display of system time 
*/
function getLangDate(){
var dateObj = new Date(); // Represents the current system time Date object  
var year = dateObj.getFullYear(); // Full year value of current system time 
var month = dateObj.getMonth()+1; // Month value of current system time  
var date = dateObj.getDate(); // Day in month of current system time 
var day = dateObj.getDay(); // Week value in current system time 
var weeks = [" Sunday "," week 1"," week 2"," week 3"," week 4"," week 5"," week 6"];
var week = weeks[day]; // Get the corresponding week string from the array based on the week value  
var hour = dateObj.getHours(); // Hour value of current system time  
var minute = dateObj.getMinutes(); // Minute value of current system time 
var second = dateObj.getSeconds(); // Seconds of current system time 
// If the value of month, day, hour, minute, second is less than 10 , before 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 announcement: [ "+newDate+" ]";
setTimeout("getLangDate()",1000);// every other 1 Second Recall 1 Next to this function  
}

(2) On the page < body > Label with the JavaScript function written in the onload event loading step (1) and add it in the appropriate place on the page < div > Label, id is "dateStr", the key code is as follows: 


<body onLoad="getLangDate()">
<div id="dateStr" class="word_grey"></div>
</body>

When displaying system time in real time, you can also use the setIntervar () method of the window object, which 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 is executed directly, whereas the setTimeout () method can only be executed once.To execute an JavaScript method directly through setTimeout () method 1, setTimeout () must be written inside the called JavaScript method body.

Related articles: