每天JS_（一）应用Date对象

最新推荐文章于 2022-09-20 15:15:52 发布

weixin_33785972

最新推荐文章于 2022-09-20 15:15:52 发布

阅读量118

点赞数

文章标签： xhtml javascript 操作系统 ViewUI

本文介绍JavaScript中Date对象的多种应用场景，包括实现时钟、记录页面停留时间、显示系统时间、获取文档最后修改时间及在状态栏显示实时时间，通过实例演示了如何利用Date对象进行时间处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写JS有一点生疏啦。。所以要加强JS的学习啦！今天就写js中关于Date对象的应用：

Date对象
它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程。
　方法
getDate() 查看Date对象并返回日期
getDay() 返回星期几
getHours() 返回小时数
getMinutes() 返回分钟数
getMonth() 返回月份值
getSeconds() 返回秒数
getTime() 返回完整的时间
getTimezoneoffset() 返回时区偏差值(格林威治平均时间与运行脚本的计算机所处时区设置之间相差的小时数)
getYear() 返回年份
parse() 返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数(Date对象按照毫秒数的形式存储从那时起的日期和时间)但是注意,该方法当前不能正确运行
setDate() 改变Date对象的日期
setHours() 改变小时数
setMinutes() 改变分钟数
setMonth() 改变月份
setSeconds() 改变秒数
setTime() 改变完整的时间
setYear() 改变年份
toGMTString() 把Date对象的日期(一个数值)转变成一个GMT时间字符串,返回类似下面的值:Weds,15 June l997 14:02:02 GMT(精确的格式依赖于计算机上所运行的操作系统而变)
toLocaleString() 把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式
UTC() 使用Date UTC(年、月、日、时、分、秒),以自从1970年1月1日00:00:00(其中时、分、秒是可选的)以来的毫秒数的形式返回日期
（1）：时钟

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>时钟</title>
7 <script type="text/javascript" language="javascript">
8 
71 </script>
72 </head>
73
74 <body onload="show()">
75 <img src="cb.gif" name="a" alt="cb.gif"/>
76 <img src="cb.gif" name="b" alt="cb.gif"/>
77 <img src="colon.gif" name="c" alt="img/colon.gif"/>
78 <img src="cb.gif" name="d" alt="cb.gif"/>
79 <img src="cb.gif" name="e" alt="cb.gif"/>
80 <img src="colon.gif" name="f" alt="img/colon.gif"/>
81 <img src="cb.gif" name="g" alt="cb.gif"/>
82 <img src="cb.gif" name="h" alt="cb.gif"/>
83 <img src="cam.gif" name="j" alt="cam.gif"/>
84 <br/>
85 <label id="说明">如果colon.gif不能加载就换成":"</label>
86 </body>
87
88 </html>
89

（2）：停留时间

（3）：显示时间

<!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>显示时间</title>
<script language="javascript" type="text/javascript">
    
</script>
</head>

<body>
<div>
<div style="height: 45px; width: 570px"><label id="Label1"></label></div>
</div>
</body>

</html>

（4）：最后一次修改时间

（5）：在浏览器状态栏中显示时间

<!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>无标题 1</title>
<script  type="text/javascript">
var timerID = null;
var timerRunning = false;
function stopclock (){
        if(timerRunning)
                clearTimeout(timerID);
        timerRunning = false;
}
function showtime () {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds()
        var timeValue = "" + ((hours >12) ? hours -12 :hours)
        timeValue += ((minutes < 10) ? ":0" : ":") + minutes
        timeValue += ((seconds < 10) ? ":0" : ":") + seconds
        timeValue += (hours >= 12) ? " P.M." : " A.M."
        window.status = timeValue;
        timerID = setTimeout("showtime()",1000);
        timerRunning = true;
}
function startclock () {
        stopclock();
        showtime();
}
</script>
</head>

<body onload="startclock()">

</body>

</html>

应用其实非常灵活，算是练习一下手 ,下一次研究Date的扩展！