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

最新推荐文章于 2022-09-12 11:20:11 发布

dingfen8597

最新推荐文章于 2022-09-12 11:20:11 发布

阅读量280

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Asa-Zhu/archive/2012/03/20/2408090.html

版权

我们常常看到某些网站上面有不间断走秒的时钟，呵呵，感觉效果很不错吧，下面我就给各位菜菜们（虽然我也只是个菜菜）解释一下！
首先我们创建一个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 οnlοad="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 οnlοad="ShowTime();"> 
<span id="stime"></span> 
</body> 
</html>

转载于:https://www.cnblogs.com/Asa-Zhu/archive/2012/03/20/2408090.html

dingfen8597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在你的网页里面显示时间(javascript 时钟原理)

我们常常看到某些网站上面有不间断走秒的时钟，呵呵，感觉效果很不错吧，下面我就给各位菜菜们（虽然我也只是个菜菜）解释一下！首先我们创建一个Date()对象，利用这个对象，就可以得到我们所需要的年、月、日、时、分、秒，看下面的代码： var Now=new Date();//实例化一个时间对象 var year=date.getFullYear();//下面的代码就是分别从实例化的对象中...
复制链接

扫一扫