Javascript（二）javascript时钟实现

痛定思痛。 2022-05-17 02:47 180阅读 0赞

# 时钟实现 #

实现这个时钟时间需要解决以下三个问题：

*  获得当前时间，并格式化
 *  如何可以在页面中显示时间
 *  让时间动起来

## 1、获得当前时间，并格式化 ##

要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。

setXxx 这些方法用于设置时间和日期值

getXxx 这些方法用于获取时间和日期值

实现代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;function getnow(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获得当前时间，格式化时间 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var now=new Date();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var year=now.getFullYear();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var month=now.getMonth()+1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(month&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;month="0"+month; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var date=now.getDate(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(date&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date="0"+date; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hour=now.getHours(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(hour&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour="0"+hour; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var minute=now.getMinutes(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(minute&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute="0"+minute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var second=now.getSeconds(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(second&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;second="0"+second; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var nowstr=year+"年"+month+"月"+date+"日 &nbsp;"+hour+":"+minute+":"+second; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(nowstr); } </td> 
 </tr> 
 </tbody> 
</table>

在body标签中使用onLoad事件绑定这个函数，使页面一加载就运行这个时钟。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&lt;body οnlοad="getnow()"&gt; &nbsp;&nbsp;&lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

运行代码就可以看到如下效果：

![70][]

## 2、如何可以在页面中显示时间 ##

目的当然不是要通过弹出框的方式显示时间，而是让他在页面中显示，可以在页面中定义一个span标签显示时间，如何可以使用JavaScript操作标签的内容呢？这里就需要用到内置对象document了，它提供了一个getElementById方法，可以根据id获得标签对象，然后就可以修改这个对象了。现在doby中顶一个一个span对象，并定义id属性，值为nowspan，代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&lt;body οnlοad=" &nbsp;&nbsp;&nbsp;&lt;span id="nowspan" &gt; &nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

修改上面的javascript代码，获得这个对象并把格式化好的时间赋给它。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // alert(nowstr);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //2、显示时间&nbsp;html &nbsp;//获得标签对象 var nowspan=document.getElementById("nowspan"); nowspan.innerHTML=nowstr; </td> 
 </tr> 
 </tbody> 
</table>

## 3、让时间动起来 ##

要让时间动起来可以使用setTimeout("函数",毫秒数) 设置定时器：经过指定毫秒值后执行某个函数。实现代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> //3、使时间动起来 setTimeout("getnow()", 1000); </td> 
 </tr> 
 </tbody> 
</table>

完整代如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; &nbsp;&nbsp; &nbsp;function getnow(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获得当前时间，格式化时间 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var now=new Date();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var year=now.getFullYear();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var month=now.getMonth()+1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(month&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;month="0"+month; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var date=now.getDate(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(date&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date="0"+date; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hour=now.getHours(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(hour&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour="0"+hour; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var minute=now.getMinutes(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(minute&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute="0"+minute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var second=now.getSeconds(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(second&lt;10){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;second="0"+second; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var nowstr=year+"年"+month+"月"+date+"日 &nbsp;"+hour+":"+minute+":"+second; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //alert(nowstr); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //2、显示时间&nbsp;html &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//获得标签对象 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var nowspan=document.getElementById("nowspan"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nowspan.innerHTML=nowstr; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//3、使时间动起来 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("getnow()", 1000); } &lt;/script&gt; &lt;body onLoad="getnow()"&gt; &lt;span id="nowspan" /&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

运行代码效果：

![70 1][]

[70]: /images/20220517/bade971b99b8434b94eec81f6a7d93ce.png
[70 1]: /images/20220517/fd391207480f4ddd840c4251586b255b.png