纯JavaScript实现动态实时时钟显示

作者:异步漫步时间:2026-10-22 04:35:39浏览:431

本文提供了一段纯JavaScript实现的动态时间显示代码。通过获取系统当前时间并格式化输出,利用setTimeout实现每秒刷新,最终在页面指定区域实时展示年月日、星期及时分秒信息,适合前端基础学习参考。

纯JavaScript实现动态时间显示

本文分享了一段使用JavaScript实现动态时间显示的具体代码,供读者参考。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js动态时间显示 </title>
</head>

<body id = "show">
 
<script>
 
 
 function run(){
 var time = new Date();//获取系统当前时间
 var year = time.getFullYear();
 var month = time.getMonth()+1;
 var date= time.getDate();//系统时间月份中的日
 var day = time.getDay();//系统时间中的星期值
 var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
 var week = weeks[day];//显示为星期几
 var hour = time.getHours();
 var minutes = time.getMinutes();
 var seconds = time.getSeconds();
 console.log(seconds);
 if(month<10){
 month = "0"+month; 
 }
 if(date<10){
 date = "0"+date; 
 }
 if(hour<10){
 hour = "0"+hour; 
 }
 if(minutes<10){
 minutes = "0"+minutes; 
 }
 if(seconds<10){
 seconds = "0"+seconds; 
 }
 //var newDate = year+"年"+month+"月"+date+"日"+week+hour+":"+minutes+":"+seconds;
 document.getElementById("show").innerHTML = year+"年"+month+"月"+date+"日"+week+hour+":"+minutes+":"+seconds;
 setTimeout('run()',1000);
 }
 
 run();

 
 
</script>
</body>
</html>

以上内容为本文的全部代码与说明,希望能为读者的学习带来帮助,同时也欢迎继续关注本站以获取更多技术资源。

作者最新文章