JavaScript Date对象详解:动态时钟、时间格式化与新年倒计时实现

作者:资源驿站

时间:2026-10-22

浏览:244

本文深入解析JavaScript中的Date对象,涵盖其作为核心时间处理工具的应用。通过三个实战案例演示:利用setTimeout实现动态数字时钟、详解getYear/getMonth等方法的返回值特性,以及通过逻辑判断实现精确的新年倒计时功能。文章包含完整代码示例,帮助开发者掌握时间处理与DOM操作技巧。

文章目录

JavaScript Date对象基础与注意事项

Date对象是JavaScript中处理时间的核心工具。尽管对于熟悉.NET的开发者而言,前端时间处理可能不如后端重要,但完全忽略它会导致问题。因为JavaScript默认依赖本地系统时间,且常以UTC(原GTM)为基准进行计算,若完全依赖前端JS处理时间逻辑,可能因用户本地时间设置错误或时区差异导致结果偏差。此外,Date对象的方法通常返回当前时间的副本,修改返回值不会影响原始Date对象本身。



动态时钟实现:利用setTimeout刷新显示

演示一:动态时钟(来个复杂的)



11:55:13


演示二:显示完整的一些方法(事实上我很讨厌有些格式了)



Mon Oct 1 22:35:25 UTC+0800 2007


从1970-01-01到现在共过了1191249325859毫秒


返回当前的年份2007


2007


返回当前月91因为月是0-11,所以要加1


返回当前日期1


返回当前星期1


返回当前小时22


返回当前分钟35


返回当前的秒25


Wed Aug 16 11:55:03 UTC+0800 2006


从1970-01-01到现在共过了1155700503156毫秒


返回当前的年份2006


2006


返回当前月71因为月是0-11,所以要加1


返回当前日期16


返回当前星期3


返回当前小时11


返回当前分钟55


返回当前的秒3




演示三: 倒计时



距2006年新年还有90天01小时24分34秒! 距2006年新年还有136天12小时04分56秒!





完整时间格式化:解析Date对象各方法返回值

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>


<!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=gb2312" />


<title>js核心对象之Date</title>


<script type="text/javascript">


function startTime()


{

var today=new Date()//定义一个时间对象


var h=today.getHours()//定义小时


var m=today.getMinutes()//定义分钟


var s=today.getSeconds()//定义秒


// add a zero in front of numbers<10


m=checkTime(m)//把分给checkTime处理


s=checkTime(s)//把秒给checkTime处理


document.getElementById('txt').innerHTML=h+":"+m+":"+s//在层txt中显示


t=setTimeout('startTime()',500)//关键的一句,美隔500毫秒运行一次本函数


}

function checkTime(i)


{//这函数意思很简单了,就是要实现01-09的效果


if (i<10) //


{i="0" + i}


return i


}

</script>


</head>



<body onload="startTime()">


<p>时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的。还有个原因,他总按照GTM市区来计量。我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响。</p>


<p><strong>演示一:动态时钟</strong>(来个复杂的)</p>


<div id="txt"></div>


<p><strong>演示二:显示完整的一些方法(事实上我很讨厌有些格式了)</strong></p>


<p>


<script language="javascript">


var md=new Date()


document.write(md+"<br>")


document.write("从1970-01-01到现在共过了"+md.getTime()+"毫秒<br>")


document.write("返回当前的年份"+md.getYear()+"<br>")


document.write(md.getFullYear()+"<br>")


document.write("返回当前月"+md.getMonth()+1+"因为月是0-11,所以要加1<br>")


document.write("返回当前日期"+md.getDate()+"<br>")


document.write("返回当前星期"+md.getDay()+"<br>")


document.write("返回当前小时"+md.getHours()+"<br>")


document.write("返回当前分钟"+md.getMinutes()+"<br>")


document.write("返回当前的秒"+md.getSeconds()+"<br>")


</script>


</p>


新年倒计时逻辑:手动计算与格式化输出

<p><strong>演示三: 倒计时</strong></p>


<p>


<SCRIPT LANGUAGE="JavaScript">


today = new Date();//申明一个时间对象


intDate = today.getDate();//返回当前的天日期


intHours = today.getHours();//返回当前小时


intMinutes = today.getMinutes();//分钟


intSeconds = today.getSeconds();//秒


intMonth = today.getMonth()+1 ;//月加1


intYear = today.getYear();//返回年


//以下是为了得到0时0分0秒的差数


hours = intHours;


hours = (23 - hours);


minutes = intMinutes;


minutes = (59 - minutes);


seconds = intSeconds;


seconds = (59 - seconds);



if (intYear % 4 == 0 && intYear % 100 != 0 || intYear % 400 == 0)


//如果当前年除以4余数为0 同时 当前年初与100 余数不为0 或者 当前年除以400余数为0,那么本年为366天


{ if (intMonth == 1) {month = "距2006年新年还有"; date = (366 - intDate);}


//以下与本句同意思:用余下的天数减去当前的日期号数例如下句,因为是二月,所以只由335天,减当前天的号数


if (intMonth == 2) {month = "距2006年新年还有"; date = (335 - intDate);}


}

else//否则为365天


{ if (intMonth == 1) {month = "距2006年新年还有"; date = (365 - intDate);}


if (intMonth == 2) {month = "距2006年新年还有"; date = (334 - intDate);}


}

if (intMonth == 3) {month = "距2006年新年还有"; date = (304 - intDate);}


if (intMonth == 4) {month = "距2006年新年还有"; date = (273 - intDate);}


if (intMonth == 5) {month = "距2006年新年还有"; date = (243 - intDate);}


if (intMonth == 6) {month = "距2006年新年还有"; date = (212 - intDate);}


if (intMonth == 7) {month = "距2006年新年还有"; date = (182 - intDate);}


if (intMonth == 8) {month = "距2006年新年还有"; date = (152 - intDate);}


if (intMonth == 9) {month = "距2006年新年还有"; date = (121 - intDate);}


if (intMonth == 10) {month = "距2006年新年还有"; date = (91 - intDate);}


if (intMonth == 11) {month = "距2006年新年还有"; date = (60 - intDate);}


if (intMonth == 12) {month = "距2006年新年还有"; date = (30 - intDate);}


//以下当然意思有所变了,但是一下的 天,时 ,分,秒 意思差不错了


if (date == 1 ){date = ("0"+date+"天 ");}//如果上面的date得1,那就在前面加个0


if (date != 1 && date < 10 && date >=0){date = ("0"+date+"天");}//如果不等于1且小于10,同时大于等于0 都加个0


if (date > 9){date = (date+"天");}//如果大于9就不用加了



if (hours ==1 ){hours = ("0"+hours+"小时");}


if (hours != 1 && hours < 10){hours = ("0"+hours+"小时");}


if (hours > 9){hours = (hours+"小时");}



if (minutes == 1){minutes = ("0"+minutes+"分 ");}


if (minutes != 1 && minutes < 10){minutes = ("0"+minutes+"分");}


if (minutes > 9){minutes = (minutes+"分");}



if (seconds == 1){seconds = ("0"+seconds+"秒 "+"!");}


if (seconds != 1 && seconds < 10){seconds = ("0"+seconds+"秒!");}


if (seconds > 9){seconds = (seconds+"秒!");}


//如果天小于0,那表示新年到了萨


if (date < 0){month = "Happy";date = " New year!";hours = " 新年";minutes = "快乐";seconds = "!";}


//下面是组合所有的值,简单吧


timeString = month+date+hours+minutes+seconds;


document.write(timeString)


</script>


</p>


</body>


</html>


实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章