JavaScript实现动态实时显示时间的方法

JavaScript实现动态实时显示时间的方法

本文通过具体实例，详细解析了使用JavaScript实现动态时间显示的技术方案，旨在为读者提供可参考的实现思路与代码示例。

Date对象的方法简介

Date对象的方法

Date对象允许开发者获取相对于国际标准时间（UTC，原称格林威治标准时间）或当前操作系统环境的时间与日期信息。要使用Date对象提供的功能，首先必须创建一个Date对象的实例。

需要注意的是，Date对象仅在Flash Player 5或更高版本的运行环境中可用。

虽然Date对象的方法并非静态方法，但在实际使用中，可以直接作用于已创建的特定Date实例上。

以下是Date对象主要方法的简要介绍：

·getDate ｜ 根据本地时间获取当前日期(本月的几号) ·getDay ｜ 根据本地时间获取今天是星期几(0-Sunday,1-Monday...) ·getFullYear ｜ 根据本地时间获取当前年份(四位数字) ·getHours ｜ 根据本地时间获取当前小时数(24小时制,0-23) ·getMilliseconds ｜ 根据本地时间获取当前毫秒数 ·getMinutes ｜ 根据本地时间获取当前分钟数 ·getMonth ｜ 根据本地时间获取当前月份(注意从0开始:0-Jan,1-Feb...) ·getSeconds ｜ 根据本地时间获取当前秒数 ·getTime ｜ 获取UTC格式的从1970.1.1 0:00以来的毫秒数 ·getTimezoneOffset ｜ 获取当前时间和UTC格式的偏移值(以分钟为单位) ·getUTCDate ｜ 获取UTC格式的当前日期(本月的几号) ·getUTCDay ｜ 获取UTC格式的今天是星期几(0-Sunday,1-Monday...) ·getUTCFullYear ｜ 获取UTC格式的当前年份(四位数字) ·getUTCHours ｜ 获取UTC格式的当前小时数(24小时制,0-23) ·getUTCMilliseconds ｜ 获取UTC格式的当前毫秒数 ·getUTCMinutes ｜ 获取UTC格式的当前分钟数 ·getUTCMonth ｜ 获取UTC格式的当前月份(注意从0开始:0-Jan,1-Feb...) ·getUTCSeconds ｜ 获取UTC格式的当前秒数 ·getYear ｜ 根据本地时间获取当前缩写年份(当前年份减去1900) ·setDate ｜ 设置当前日期(本月的几号) ·setFullYear ｜ 设置当前年份(四位数字) ·setHours ｜ 设置当前小时数(24小时制,0-23) ·setMilliseconds ｜ 设置当前毫秒数 ·setMinutes ｜ 设置当前分钟数 ·setMonth ｜ 设置当前月份(注意从0开始:0-Jan,1-Feb...) ·setSeconds ｜ 设置当前秒数 ·setTime ｜ 设置UTC格式的从1970.1.1 0:00以来的毫秒数 ·setUTCDate ｜ 设置UTC格式的当前日期(本月的几号) ·setUTCFullYear ｜ 设置UTC格式的当前年份(四位数字) ·setUTCHours ｜ 设置UTC格式的当前小时数(24小时制,0-23) ·setUTCMilliseconds ｜ 设置UTC格式的当前毫秒数 ·setUTCMinutes ｜ 设置UTC格式的当前分钟数 ·setUTCMonth ｜ 设置UTC格式的当前月份(注意从0开始:0-Jan,1-Feb...) ·setUTCSeconds ｜ 设置UTC格式的当前秒数 ·setYear ｜ 设置当前缩写年份(当前年份减去1900) ·toString ｜ 将日期时间值转换成"日期/时间"形式的字符串值 ·Date.UTC ｜ 返回指定的UTC格式日期时间的固定时间值

动态时间显示完整示例

以下是一个在页面中直接通过JavaScript获取并显示系统动态时间的完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实时显示时间</title>
</head>
<body>
<div id="localtime"></div>
<script type="text/javascript">
function showLocale(objD)
{
  var str,colorhead,colorfoot;
  var yy = objD.getYear();
   if(yy<1900) yy = yy+1900;
  var MM = objD.getMonth()+1;
   if(MM<10) MM = '0' + MM;
  var dd = objD.getDate();
   if(dd<10) dd = '0' + dd;
  var hh = objD.getHours();
   if(hh<10) hh = '0' + hh;
  var mm = objD.getMinutes();
   if(mm<10) mm = '0' + mm;
  var ss = objD.getSeconds();
   if(ss<10) ss = '0' + ss;
  var ww = objD.getDay();
   if ( ww==0 ) colorhead="<font color=\"#FF0000\">";
   if ( ww > 0 && ww < 6 ) colorhead="<font color=\"#373737\">";
   if ( ww==6 ) colorhead="<font color=\"#008000\">";
   if (ww==0) ww="星期日";
   if (ww==1) ww="星期一";
   if (ww==2) ww="星期二";
   if (ww==3) ww="星期三";
   if (ww==4) ww="星期四";
   if (ww==5) ww="星期五";
   if (ww==6) ww="星期六";
   colorfoot="</font>"
    str = colorhead + yy + "年" + MM + "月" + dd + "日" + hh + ":" + mm + ":" + ss + " " + ww + colorfoot;
   //alert(str);
			return str;
}
function tick()
{
  var today;
  today = new Date();
  document.getElementById("localtime").innerHTML = showLocale(today);
  window.setTimeout("tick()", 1000);
}
tick();
</script>
</body>
</html>

运行该示例后的效果如下图所示：

补充说明：对于希望深入探究JavaScript时间与日期操作的用户，还可以参考本站提供的在线工具：

Unix时间戳(timestamp)转换工具： http://tools.jb51.net/code/unixtime

在线世界各地时间查询： http://tools.jb51.net/zhuanhuanqi/worldtime

在线万年历日历： http://tools.jb51.net/bianmin/wannianli

网页万年历日历： http://tools.jb51.net/bianmin/webwannianli

如需了解更多JavaScript相关内容，建议查阅本站系列专题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。

希望本文所述内容能对大家的JavaScript编程实践有所帮助。