js年月日小时分钟秒动态时钟效果

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

本章节分享一段代码实例,它实现了时间日期效果,能够精确掉秒,并且可以自动变化。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
window.onload = function () {
  var str = '';
  var oTime = document.getElementById('time');
 
  function fnTime() {
    var time = new Date();
    var day = time.getDay();
    if (day == 1) {
      day = '星期一';
    } else if (day == 2) {
      day = '星期二';
    } else if (day == 3) {
      day = '星期三';
    } else if (day == 4) {
      day = '星期四';
    } else if (day == 5) {
      day = '星期五';
    } else if (day == 6) {
      day = '星期六';
    } else {
      day = '星期日'
    }
 
    str = time.getFullYear() + '年'
          + time.getMonth() + 1 + '月'
          + time.getDate() + '日 '
          + day + ' '
          + toTwo(time.getHours())
          + ':'
          + toTwo(time.getMinutes()) + ':'
          + toTwo(time.getSeconds());
    oTime.innerHTML = str;
  }
 
  fnTime();
  setInterval(function () {
    fnTime();
  }, 1000);
  function toTwo(n) {
    return n < 10 ? '0' + n : '' + n;
  }
}
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>

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

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var str = '',声明一个变量并赋值为空。

(3).var oTime = document.getElementById('time'),获取id属性值为time的元素对象。

(4).function fnTime() {},此方法实现了当前的时间日期,那么不断调用的话就实现了时间日期自动变动效果。(5).var time = new Date(),创建一个时间日期对象。

(6).var day = time.getDay(),返回一个0-6之间的数字,和星期相对应。

(7).if (day == 1) {

  day = '星期一';

} else if (day == 2) {

  day = '星期二';

} else if (day == 3) {

  day = '星期三';

} else if (day == 4) {

  day = '星期四';

} else if (day == 5) {

  day = '星期五';

} else if (day == 6) {

  day = '星期六';

} else {

  day = '星期日'

}将对应的数字转换为汉字形式的星期。

(8).str = time.getFullYear() + '年'

          + time.getMonth() + 1 + '月'

          + time.getDate() + '日 '

          + day + ' '

          + toTwo(time.getHours())

          + ':'

          + toTwo(time.getMinutes()) + ':'

          + toTwo(time.getSeconds());

将时间日期连接成字符串。

(9).oTime.innerHTML = str,将字符串写入指定元素。

(10).fnTime(),执行此函数,这么做的目的是为了立马显示实现,否则会有一秒的延迟。

(11).setInterval(function () {

  fnTime();

}, 1000),每隔一秒调用一次fnTime()函数,这样就是先时间日期自动变动效果。

(12).function toTwo(n) {

  return n < 10 ? '0' + n : '' + n;

},如果日期数字是个位数,前面就加0。

二.相关阅读:

(1).关于时间日期对象可以参阅JavaScript Date对象一章节。

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

(3).setInterval()可以参阅setInterval()一章节。

js年月日小时分钟秒动态时钟效果,这样的场景在实际项目中还是用的比较多的,关于js年月日小时分钟秒动态时钟效果就介绍到这了。

js年月日小时分钟秒动态时钟效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容