JavaScript显示日期，电子钟的制作

最新推荐文章于 2022-10-01 23:19:21 发布

原创最新推荐文章于 2022-10-01 23:19:21 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍JavaScript中日期对象的创建及多种方法的应用，如获取当前时间、设置特定日期、制作动态时钟等，同时涵盖日期比较的基本技巧。

定义日期

用

var date=new Date()来定义日期对象。

可以用toUTCString()的方法来显示当前的具体时间

ex：

var d=new Date();

document.write(d.toUTCString());

返回当前日的日期

直接使用Date()即可。

ex：

document.write(Date());

则显示:Sat Jul 28 2018 16:56:12 GMT+0800 (中国标准时间)

getTime()

用其来返回从1970年1月1号到现在的毫秒数。

ex：

var d=new Date();

document.write(d.getTime());

</script>

setFullYear()

用来设置具体的时间

$注意：这里的月份是从0开始的，所以要设置1月份，则要为0；

ex：=

var d=new Date();

d.setFullYear(2018,6,28);

document.write(d);

</script>

Sat Jul 28 2018 17:07:00 GMT+0800 (中国标准时间)

显示今天是星期几

利用getDay()方法和一个数组来显示今天是星期几，而不是冷冰冰的数字。

ex：

<html>
<body>
<script>
var d=new Date();
var weekday=new Array();
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write(weekday[d.getDay()]);
</script>
</body>
</html>

制作一个点钟（电子钟）

<html>
<head>
<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)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
setTimeout("startTime()",500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

这里用到了一个setTimeout的函数，这个函数的作用是：每隔一定的时间段再调用函数。

这里是每隔500毫秒就再调用一次函数从而实现动态的效果。关于setTimeout()，请见：https://blog.youkuaiyun.com/weixin_41060905/article/details/81286510

分析：

这里每隔500秒就调用一次函数，而该函数会调用系统的时间，并检测在分和秒的时候

是否会小于10，小的话就填上0（检测原理：先把他由数字转化成字符）（这里面会有一个转化）