js自动变动时间日期效果代码实例

本章节通过代码实例介绍一下如何实现自动走动的时间效果，也就是能够读秒的时间日期。

可以是网页能够增加动态的感觉，也比较美观，下面是实现的代码，并且有详细的注释，有些代码最好不但会用，而且能够明白其中实现的原理，代码如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function getCurrentDate(){
  var timeStr = '';
  var curDate = new Date();
  var curMonth = curDate.getMonth()+1;
  var curDay = curDate.getDate();
  var curWeekDay = curDate.getDay();
  var curHour = curDate.getHours();
  var curMinute = curDate.getMinutes();
  var curSec =curDate.getSeconds();
  timeStr = curMonth+'月'+curDay+'日 周';
  switch(curWeekDay){
    case 0:timeStr += '日';break;
    case 1:timeStr += '一';break;
    case 2:timeStr += '二';break;
    case 3:timeStr += '三';break;
    case 4:timeStr += '四';break;
    case 5:timeStr += '五';break;
    case 6:timeStr += '六';break;
  }
  if(curHour < 10){
    if(curMinute < 10){
      if(curSec < 10){
        timeStr += ' 0'+curHour+':0'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' 0'+curHour+':0'+curMinute+':'+curSec;
      }
    }
    else{
      if(curSec < 10){
        timeStr += ' 0'+curHour+':'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' 0'+curHour+':'+curMinute+':'+curSec;
      }
    }
  }
  else{
    if(curMinute < 10){
      if(curSec < 10){
        timeStr += ' '+curHour+':0'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' '+curHour+':0'+curMinute+':'+curSec;
      }
    }
    else{
      if(curSec < 10){
        timeStr += ' '+curHour+':'+curMinute+':0'+curSec;
      }
      else{
        timeStr += ' '+curHour+':'+curMinute+':'+curSec;
      }
    }
  }
  $("#time").text(timeStr);
  setTimeout(getCurrentDate,1000);
}
$(document).ready(function(){
  getCurrentDate()
})
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>

代码描述：js自动变动时间日期。js自动变动时间日期效果代码实例

下载全部收藏

190 253

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册