实现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 printTime(){
  var time=new Date();
  var year=time.getFullYear();
  var month=(time.getMonth())+1;
  var daynum=time.getDay();
  var hour=time.getHours();
  var min = time.getMinutes();
  var sec=time.getSeconds();
  var da=time.getDate();
  var daystr;
  switch(daynum){
    case 0: daystr="星期日";
      break;
    case 1: daystr="星期一";
      break;
    case 2: daystr="星期二";
      break;
    case 3: daystr="星期三";
      break;
    case 4: daystr="星期四";
      break;
    case 5: daystr="星期五";
      break;
    case 6: daystr="星期六";
      break;
    default: daystr="";
  }
  var str=year+"年"+month+"月"+da+"日  "+daystr+" "+hour+": "+min+": "+sec;
  timer.innerHTML=str;
  setTimeout(printTime,1000);
}
window.onload=function(){printTime();}
</script>
<body>
<div id="timer"></div>
</body>
</html>

能够实时的获取当地系统的时间日期,下面介绍一下它的时间过程。

一.实现原理:

原理大致是这样,创建一个函数,能够获取当前的系统时间,为了能够有实时变化效果,要每秒调用一次此函数,所以在函数的尾部使用setTimeout定时器函数递归调用函数本身。

二.代码注释:

(1).时间日期相关方法参阅JavaScript Date对象一章节。

(2).innerHTML属性可以参阅JavaScript innerHTML一章节。  

(3).setTimeout方法可以参阅window setTimeout()一章节。

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

回复

我来回复
  • 暂无回复内容