JavaScript实现秒级动态时钟的两种代码示例

作者:拾光时间:2026-10-22 09:28:49浏览:334

本文介绍了两种使用JavaScript实现秒级动态时钟的方法。第一种通过setInterval定时器每秒调用函数更新显示;第二种在页面加载时获取年月日时分秒并格式化输出。两种方案均展示了前端时间处理的基本逻辑,适合初学者参考。

第一种实现方式:定时器动态更新

第一种实现方式利用定时器机制。代码中定义了一个showtime函数,该函数内部实例化Date对象获取当前时间,并提取时、分、秒拼接成字符串。通过setInterval函数设置每1000毫秒(即1秒)执行一次showtime,将结果写入id为timeBox的输入框中。


 <html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
setInterval("showtime()", 1000);
function showtime() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"
+ date.getSeconds();
document.getElementById("timeBox").value = time;
}
</script>
 </head>
 <body>
 <div style="text-align:center;">
  当前时间:<input type="text" name="timeBox" id="time" />
 </div>
 </body>
</html>

第二种实现方式:页面加载时格式化显示

第二种方式侧重于页面加载时的时间格式化展示。showLeftTime函数在页面onload事件中触发,获取当前Date对象的年、月、日、时、分、秒。其中月份需加1以符合常规显示。函数将获取的时间数据拼接为包含年月日及换行符的字符串,并赋值给id为show的元素innerHTML。注意此示例中未使用定时器循环,仅展示初始状态或需手动刷新。


<html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
 //获得当前时间,刻度为一千分一秒 
 function showLeftTime() {  
 var now = new Date();  
 var year = now.getFullYear();  
 var month = now.getMonth() + 1;  
 var day = now.getDate();  
 var hours = now.getHours();  
 var minutes = now.getMinutes();  
 var seconds = now.getSeconds();  
 document.all.show.innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + ""; 
 //document.getElementById("show").innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";  
  
 //一秒刷新一次显示时间 
 setTimeout(showLeftTime, 1000); 
 } 
 
 </script> 
 </head>
 <body onload="showLeftTime()">
 <label id="show"></label><br/>
 <!-- <script type="text/javaScript">
 showLeftTime();
 </script> -->
 </body>
</html>

以上分享了两种基于JavaScript控制时间显示的实例,分别对应定时更新与单次格式化输出。希望这些代码示例能为您提供参考,助您更好地掌握前端时间处理技巧。

作者最新文章