动态刷新时间(用innerHTML)

1.首先是先将时间取出来并保存起来
var now = new Date();//新建一个时间对象
var hours = now.getHours();//取出当前小时数,保存于变量中
var minutes = now.getMinutes();//取出当前分钟数,保存地变量中
var seconds = now.getSeconds();//取出当前秒数
 (1.1 显示统一格式,用两位数字统一显示时间格式,如:09:20:00 ,只要分别判断数值是否小于9,小于9就在前面加0,)
 if (hours<=9) hours = "0"+hours;
 if (minutes<=9) minutes = "0"+minutes;
 if (seconds<=9) seconds = "0"+seconds;

2.之后要解决的问题就在网页上显示出来,可以使用form,利用input 的值进行显示,这里我使用另一种方法,在一个带ID的标签作为该内容显示出来
 2.1首先在HTML 里建一个标签,这里使用标签,并且定义ID=TIME, 
 代码如下:
 
 
 
  
 
 

 2.2 接着要解决就是把时间显示到该标签的内容中
 var showtime=document.getElementById("time");//定义一个变量,与id=time的标签关联想来,
 showtime.innerHTML = hours+":"+minutes+":"+seconds;//这里showtime.innerHTML 内的值就是对应ID标签里的内容,实际就是把时间作为这个标签的内容显示出来.

3.最后要解决的就是动态的更新时间,这里要使用一个函数setTimeout(),该函数有两个参数,第一个是需要调用的函数,第二个是多少时间后调用一次参数一的函数,1000为一秒.
为此,我们需要把前面写的JAVASCRIPT 代码封装一个函数.
代码如下:
function clock()
{
var showtime=document.getElementById("time");
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if (hours<10) hours = "0"+hours;
if (minutes<10) minutes = "0"+minutes;
if (seconds<10) seconds = "0"+seconds;

var timestr = hours+":"+minutes+":"+seconds;
showtime.innerHTML=timestr;
setTimeout("clock()",1000);//一秒后执行一次CLOCK 函数,当下次执行CLOCK函数运行到这里时又再次在一秒后执行clock 函数,这里就形成了循环,不停的执行这个函数,即每一秒都更新一次时间
}

最后就是在页面载入的时候执行个clock 函数

在body里面加入如下的代码
这样就可以在页面载入的时候自动运行了