当我们需要在页面中显示当前的日期时间时,可以使用 JavaScript 编写代码来实现。我们可以使用Date()
对象来获取当前的日期时间,并使用setInterval()
函数来每秒更新时间。下面是一个基本的实例,可以每秒钟更新显示的时间:
代码实现
<p id="time"></p>
<script>
setInterval(function() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("time").innerHTML = time;
}, 1000);
</script>
代码说明
- 首先我们使用
setInterval()
函数,指定了每隔一秒该函数内的代码块就会执行一次; - 在该代码块内,我们使用
Date()
对象创建了一个日期时间对象,并使用toLocaleTimeString()
函数获取了当前的时间,并将其存储在了一个变量中; - 最后,我们使用
document.getElementById()
函数获取了指定的<p>
元素,并使用innerHTML
属性将获取到的时间输出到了该元素中。
除了以上的代码实现,我们还可以使用另外一种常见的方法,即在页面中使用<span>
元素显示日期时间。下面我们来看一下该实例的完整代码和注释说明:
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 显示日期时间的实例</title>
<style>
#datetime {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<!--在页面中添加一个 id 为 datetime 的 <span> 元素-->
<span id="datetime"></span>
<script>
// 使用 setInterval() 函数每隔一秒更新时间
setInterval(function() {
// 创建一个新的 Date() 对象获取当前时间
var date = new Date();
// 获取小时、分钟和秒
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
// 根据上述内容拼接显示的时间字符串
var time = hours + ":" + minutes + ":" + seconds;
// 获取页面中的 <span> 元素
var realtime = document.getElementById("datetime");
// 更新 <span> 元素中的时间
realtime.innerHTML = time;
}, 1000);
</script>
</body>
</html>
代码说明
- 首先我们在页面中添加了一个
<span>
元素,并给其指定了一个id
为datetime
; - 然后我们在页面的
<head>
部分添加了一个 CSS 样式,将字体大小设置为 24 像素,颜色设置为蓝色; - 在
<script>
标签中,我们使用setInterval()
函数每隔一秒更新时间; - 在更新时间的函数内,我们创建了一个新的
Date()
对象来获取当前时间,并使用getHours()
、getMinutes()
和getSeconds()
方法来获取小时、分钟和秒数; - 然后,我们使用字符串拼接的方式将获取到的时间值合并成一个字符串,并将其存储在一个变量中;
- 最后,我们使用
document.getElementById()
方法获取页面中的<span>
元素,并使用innerHTML
属性将时间字符串更新到该元素中。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 显示日期时间的实例(时间过一秒加1) - Python技术站