Home >Web Front-end >JS Tutorial >Native javascript implements automatic update of time and date_javascript skills

Native javascript implements automatic update of time and date_javascript skills

WBOYOriginal: 2016-05-16 15:15:461547browse

Things that can change dynamically are always more attractive and even more practical than static ones. For example, the effect of automatically changing time and date is like this. Here is a code example to introduce how to achieve this effect. The code example is as follows:
1. Specific code

<html>
<head>
<meta charset="gb2312">
<title>脚本之家</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="当前时间："+y+"年"+h+"时"+m+"分"+s+"秒";
 t = setTimeout(time,1000);    
} 
window.onload=function(){time()}
</script>
</head>
<body>
<div id="timeShow"></div>
</body>
</html>

The above code achieves our requirements. Here is a brief introduction to the implementation process.
2. Implementation Principle
The time() function can obtain the current time and date, and then use the timer function at the end of the function to recursively call the time() function, which means that the time() function can be continuously executed, thus realizing the automatic update of the time and date. Not much introduction here.

3. Supplementary relevant information

javascript time function

Javascript provides Date objects for time and date calculations. Date objects have multiple constructors:

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

2. dateObj=new Date(milliseconds) //The number of milliseconds from the starting time on 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) //You don’t need to write all the time values, otherwise the default is 0

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

The following is the function list of Date object . The usage method is as shown above:

1), get class function:
getDate() function -- returns the number of days (1-31)
getDay() function -- returns the day of the week (0-6)
getFullYear() function -- returns the four-digit year
getHours() function -- returns the number of hours (0-23)
getMilliseconds() function -- returns the number of milliseconds (0-999)
getMinutes() function -- returns the number of minutes (0-59)
getMonth() function -- returns the number of months (0-11)
getSeconds() function -- the number of seconds returned (0-59)
getTime() function -- returns the timestamp representation (in milliseconds)
getYear() function -- returns the year (real year minus 1900)

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

3), conversion display function:
toLocalString() function -- returns localized string representation
toLocaleDateString function -- returns the localized string of the date part
toLocaleTimeString function -- returns the localized string of the time part

Relative to local output, there is also:

toString()
toDateString()
toTimeString()

The difference is that the former has different local language formats according to different machines, while the latter is an internal representation format

4), date parsing function

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

The above is the detailed content about JavaScript time and date. I hope it will be helpful to everyone's learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript operation class and style code_javascript skillsNext article：Detailed explanation of JavaScript operation class and style code_javascript skills

See more

Native javascript implements automatic update of time and date_javascript skills

Related articles