在你的网页里面显示时间(javascript 时钟原理) - Asa.Zhu

公告
我们常常看到某些网站上面有不间断走秒的时钟，呵呵，感觉效果很不错吧，下面我就给各位菜菜们（虽然我也只是个菜菜）解释一下！
首先我们创建一个Date()对象，利用这个对象，就可以得到我们所需要的年、月、日、时、分、秒，看下面的代码：
 
var Now=new Date();//实例化一个时间对象 
var year=date.getFullYear();//下面的代码就是分别从实例化的对象中取出年、月、日、时、分、秒，并存储到变量当中备用。 
var month=date.getMonth()+1; 
var day=date.getDate(); 
var hour=date.getHours(); 
var minutes=date.getMinutes(); 
var second=date.getSeconds();
下面就是如何将年、月、日、时、分、秒的值呈现出来了，这里我们用一个变量timestr，将年、月、日、时、分、秒以字符串的形式写到这个timestr变量中（之间加入我们习惯的间隔符）：
 
var timestr=year+"年"+month+"月"+day+"日  "+check(hour)+":"+check(minutes)+":"+check(second);
各位菜菜注意了，在hour等变量上我加了一个名为check()的函数，各位想想，我们平时看到的时钟都是按如下方式显示的：
2008年6月16日  19：03：06（当时分秒中的某一个值小于10时，我们习惯在前面补“0”）
2008年6月16日  19：33：06
如果不用自定义函数check()时，其显示结果就将出现如下情况：
2008年6月16日  19：3：6
2008年6月16日  19：33：6
这似乎不合符我们的习惯，所以采用如下的自定义函数：
 

function check(val){ 
    if (val<10){ 
        return("0"+val);//参数小于10时，在前面补0 
    }else{ 
        return(val); 
    } 
}
然后是显示了，这里我想让时间显示在一个ID为“stime”的容器当中，代码如下：
 

document.getElementById("stime").innerText=timestr;
给大家解释一下，上面这句就是根据ID号，取得对象，并将其内部文本（对象的innerText属性）替换为时间字符串。

接近尾声了，我们为了让时钟能够连续走时，下面这句是必不可少的：
 
var timerID=setTimeout(’code’,1000);
它的作用就是在1000ms之后执行引号中的代码。这时就差不多了！然后我们把这些东西都写入到一个函数，方便我们调用！
 

function ShowTime() 
{ 
    var date=new Date(); 
    var year=date.getFullYear(); 
    var month=date.getMonth()+1; 
    var day=date.getDate(); 
    var hour=date.getHours(); 
    var minutes=date.getMinutes(); 
    var second=date.getSeconds(); 
    var timestr=year+"年"+month+"月"+day+"日  "+check(hour)+":"+check(minutes)+":"+check(second); 
    document.getElementById("stime").innerText=timestr; 
    var timerID=setTimeout(’ShowTime();’,1000);//这里要执行的代码就是函数本身，这样这个函数就可以不断重复的执行了！ 
}
那刚开始触发这个函数呢？你可能会问，当然那刚开始我们必须调用一下函数，这个我们可以通过<body>标签的“onload”事件来触发。
 
<body onload="ShowTime();">
最后在你要插入时间的地方写下这些代码：
 
<span id="stime"></span>
这时一个实时刷新的时钟就呈现在了你的页面上！HTML代码：
 
<!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>蓝光——BlueShine</title> 
<script language="JavaScript"> 
<!-- 
function check(val){ 
 if (val<10){ 
  return("0"+val); 
 }else{ 
  return(val); 
 } 
} 
function ShowTime() 
{ 
 var date=new Date(); 
 var year=date.getFullYear(); 
 var month=date.getMonth()+1; 
 var day=date.getDate(); 
 var hour=date.getHours(); 
 var minutes=date.getMinutes(); 
 var second=date.getSeconds(); 
 var timestr=year+"年"+month+"月"+day+"日  "+check(hour)+":"+check(minutes)+":"+check(second); 
 document.getElementById("stime").innerText=timestr; 
 var timerID=setTimeout(’ShowTime();’,1000); 
} 
//--> 
</script>  
</head> 
<body onload="ShowTime();"> 
<span id="stime"></span> 
</body> 
</html>
posted on 2012-03-20 16:07 Asa.Zhu 阅读(2948) 评论(0) 编辑收藏举报
刷新页面返回顶部