JavaScript动态显示当前日期时间与星期几

作者:页面旅途

时间:2026-10-29

浏览:495

本文介绍如何在网页中使用JavaScript动态显示当前日期时间和星期几。通过定义获取日期的函数并结合定时器,实现每秒刷新显示效果。代码示例展示了如何格式化年月日时分秒,并处理月份和日期的补零逻辑,同时利用数组映射星期数值为中文名称,最终将结果输出到指定DOM元素中。

文章目录

JavaScript动态显示当前日期时间与星期几

在网页开发中,经常需要实时展示当前的日期和时间,并附带星期信息。具体的实现方案如下所示:


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function currentTime(){ 
  var d=new Date(),str=''; 
  str+=d.getFullYear()+'年'; 
  str+=d.getMonth() + 1+'月'; 
  str+=d.getDate()+'日'; 
  str+=d.getHours()+'时'; 
  str+=d.getMinutes()+'分'; 
  str+= d.getSeconds()+'秒'; 
  return str; 
} 
setInterval(function(){$('#time').html(currentTime)},1000); 
</script> 
</head> 
<body> 
<div id="time"></div> 
</body> 
</html> 

若要在网页上实现日期时间的动态刷新显示,并同步展示星期信息,可以参考以下实现方式:


function showTime(){ 
  var show_day=new Array('星期一','星期二','星期三','星期四','星期五','星期六','星期日'); 
  var time=new Date(); 
  var year=time.getYear(); 
  var month=time.getMonth(); 
  var date=time.getDate(); 
  var day=time.getDay(); 
  var hour=time.getHours(); 
  var minutes=time.getMinutes(); 
  var second=time.getSeconds(); 
  month<10?month='0'+month:month; 
  month=month+1; 
  hour<10?hour='0'+hour:hour; 
  minutes<10?minutes='0'+minutes:minutes; 
  second<10?second='0'+second:second; 
  var now_time='当前时间:'+year+'年'+month+'月'+date+'日'+' '+show_day[day-1]+' '+hour+':'+minutes+':'+second; 
  document.getElementById('showtime').innerHTML=now_time; 
  setTimeout("showTime();",1000); 
} 

网络上关于此类功能的教程资源丰富,涵盖了获取当前日期时间、计算一周前时间等多种场景,这些资料具有较高的参考价值。建议开发者多阅读相关文章,熟练掌握此类常用技巧。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章