纯JS实现动态时间显示代码

最新推荐文章于 2025-09-19 10:30:45 发布

转载最新推荐文章于 2025-09-19 10:30:45 发布 · 1.2w 阅读

java基础专栏收录该内容

167 篇文章

订阅专栏

本文介绍使用JavaScript在网页上实时显示当前日期时间的方法，并展示如何同时显示星期几。提供了多种实现方式，包括直接使用HTML与JavaScript，利用定时器刷新显示内容。

一、

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); //动态调取时间

}





三、

<span style="font-size:18px;">
var datelocalweek=new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六");  
var datelocalnow=new Date();   
var datelocalyear=datelocalnow.getFullYear();   
var datelocalmonth=(datelocalmonth="0"+(datelocalnow.getMonth()+1)).substr(datelocalmonth.length-2,2);   
var datelocalday=(datelocalday="0"+datelocalnow.getDate()).substr(datelocalday.length-2,2);   
var datelocalweekday=datelocalweek[datelocalnow.getDay()];   
document.write("<font color=#fc7a05>北京时间</font><font color=#666666>： "+datelocalyear+"年"+datelocalmonth+"月"+datelocalday+"日"+"  "+datelocalnow.getHours()+":"+datelocalnow.getMinutes()+":"+datelocalnow.getSeconds()+" "+datelocalweekday+"</font>"); </span>  


解释下：
var datelocalnow=new Date();    建立一个时间类

var datelocalyear=datelocalnow.getFullYear();   获取年份

var datelocalmonth=(datelocalmonth="0"+(datelocalnow.getMonth()+1)).substr(datelocalmonth.length-2,2);   获取月份
var datelocalday=(datelocalday="0"+datelocalnow.getDate()).substr(datelocalday.length-2,2);  获取日期
var datelocalweekday=datelocalweek[datelocalnow.getDay()]; 获取星期

datelocalnow.getHours()  获取小时

datelocalnow.getMinutes() 获取分钟

datelocalnow.getSeconds() 获取秒



/**       
 * 对Date的扩展，将 Date 转化为指定格式的String       
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符       
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)       
 * eg:       
 * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423       
 * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04       
 * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04       
 * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04       
 * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18       
 */    



四、



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

 <script language="javascript">

     var t = null;

    t = setTimeout(time,1000);//开始执行

    function time()

    {

       clearTimeout(t);//清除定时器

       dt = new Date();

       var h=dt.getHours();

       var m=dt.getMinutes();

       var s=dt.getSeconds();

       document.getElementById("timeShow").innerHTML =  "现在的时间为："+h+"时"+m+"分"+s+"秒";

       t = setTimeout(time,1000); //设定定时器，循环执行             

    } 

  </script>

</head><body>

<label id="timeShow"></lable>

</body>

</html>