JavaScript动态时间日期

快乐打工仔 分类:实例代码

JavaScript动态时间日期属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了动态的时间。

当然我们不是说那种华丽的圆形的钟表的效果,这里只是获取系统时间,能够自动变化的效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
function Format2Len(i){
  return i < 10 ? "0" + i : i;
}
function RefreshClock(){
  var CurrentTime=new Date();
  var timeStr=CurrentTime.getFullYear() + "-" +
  Format2Len(CurrentTime.getMonth()+1) + "-" +
  Format2Len(CurrentTime.getDate()) + " " +
  Format2Len(CurrentTime.getHours()) + ":" +
  Format2Len(CurrentTime.getMinutes()) + ":" +
  Format2Len(CurrentTime.getSeconds());
  txtClock.value = timeStr;
  setTimeout(RefreshClock,1000);
}
window.onload=function(){
  RefreshClock();
}
</script>
</head>
<body>
 当前时间:<input type="text" id="txtClock" />
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function Format2Len(i){

  return i < 10 ? "0" + i : i;

},此方法实现了在个位数前面加0的功能,比如5被修改成05。

(2).function RefreshClock(){},此方法实现了核心功能。

(3).var CurrentTime=new Date(),创建当前时间对象。

(4).var timeStr=CurrentTime.getFullYear() + "-" +,获取年份,后面使用横岗连接。

(5).setTimeout(RefreshClock,1000),以递归的方式不断调用RefreshClock函数。

二.相关阅读:

(1).setTimeout()方法参阅setTimeout()一章节。

(2).Date对象参阅JavaScript Date对象一章节。

JavaScript动态时间日期,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态时间日期就介绍到这了。

回复

我来回复
  • 暂无回复内容