The native javascript implementation automatically updates the date and time

  • 2020-12-20 03:28:11
  • OfStack

Things that can change dynamically are always more attractive than static ones, and even have more practical effects. For example, the effect of time and date that can change automatically is just like this. The following code example introduces how to achieve this effect.
1. Specific code


<html>
<head>
<meta charset="gb2312">
<title> The home of the script </title>
<script type="text/javascript">
var t = null;
function time(){
 dt = new Date();
 var y=dt.getFullYear();
 var h=dt.getHours();
 var m=dt.getMinutes();
 var s=dt.getSeconds();
 document.getElementById("timeShow").innerHTML=" Current time: "+y+" years "+h+" when "+m+" points "+s+" seconds ";
 t = setTimeout(time,1000);    
} 
window.onload=function(){time()}
</script>
</head>
<body>
<div id="timeShow"></div>
</body>
</html>

Above code to achieve our requirements, the following is a brief introduction to the implementation process 1.
2. Implementation principle
The time() function can retrieve the current time and date, and then recursively call the time() function at the end of the function using the timer function. In other words, the time() function can be executed continuously, thus realizing the automatic update of the time and date, which is not described here.

3. Supplementary relevant information

javascript time function

javascript provides the Date object for time and date calculations. The Date object has a variety of constructors:

1, dateObj=new Date() // Current time

2, dateObj=new Date(milliseconds) // The number of milliseconds since the start time of January 1, 1970

3, dateObj=new Date(datestring) // The date and time represented by the string. This string can be converted using Date.parse (), such as "Jannuary 1, 1998 20:13:15"

4, dateObj=new Date(year, month, day, hours, minutes, seconds, microseconds) // Time value, can not all write, do not write the default is 0

Call object functions when used, for example
year=dateObj.getFullYear(); // Get the year value

The following is a list of functions for the Date object, using the methods shown above:

1) Obtain class functions:
getDate() function -- returns days (1-31)
getDay() function -- returns the number of weeks (0-6)
getFullYear() function - returns a 4-digit year
getHours() function -- number of return hours (0-23)
getMilliseconds() function -- returns the number of milliseconds (0-999)
getMinutes() function -- number of minutes returned (0-59)
getMonth() function -- returns the number of months (0-11)
getSeconds() function -- number of seconds returned (0-59)
getTime() function -- returns timestamp representation (in milliseconds)
getYear() function - returns the year (true year minus 1900)

2) Set class functions:
(The following functions return the number of milliseconds between the date object and midnight on January 1, 1970)
The setDate() function -- sets the day of the month
setFullYear() function -- set year, month, and day
setHours() function - sets hours, minutes, seconds, and milliseconds
setMilliseconds() function - sets the number of milliseconds
setMinutes() function - sets minutes, seconds, milliseconds
setMonth() function - sets month, day
The setSeconds() function -- sets the day of the month
setTime() function - Sets the date object with milliseconds
setYear() function -- set year (true year minus 1900)

3) Transform display class functions:
toLocalString() function - returns a localized string representation
toLocaleDateString function - returns a localized string for the date section
toLocaleTimeString function - returns a localized string for the time section

Relative to local output, there are:

toString()
toDateString()
toTimeString()

The difference is that the former has different local language formats depending on the machine, and the latter is the internal presentation format

4) Date resolution function

Date. parse() function - parses a string of 1 date and returns the number of milliseconds between the date and midnight on January 1, 1970

The above is about javascript time date detailed content, hope to be helpful to your study.


Related articles: