今天小女刚学会了一个好玩的小玩意儿~~特来跟大家分享一下~~~

这是一个有趣的时钟显示程序，可以进行实时的年月日、星期、时分秒更新，有了这组小代码，以后可以作为日期插件应用在大型的JS代码中哦~~

积少成多，时间是一点点省下来的，效率也是慢慢提高的。

好了，废话不多说了，马上进入正题(*^▽^*)

首先，为了使页面在固定位置定时刷新，我需要在body中写入一个div，代码结构如下:

  1. <body>
  2.     <div id="div"> </div>
  3.     <script type="text/javascript">
  4.              // JS代码
  5.     </script>
  6. </body>

这个小程序中，重点使用JS内置对象中的Date日期类对象编写代码，以下是一些概念性的知识，稍微提一下：

1、new Date() ：返回当前最新时间； new Date("2017,12,31,12:34:12"); 返回指定时间。
2、常用方法：
　　① .getFullYear()：获取年份。
　　② .getMonth()：获取月份。
　　③ .getDate(); 获取一个月中的第几天
　　③ .getDay(); 获取一个周中的第几天 0-表示周天。时分秒以此类推...

接下来，我们首先需要声明一个函数，函数名为getTime()，然后在函数体中进行年月日、时分秒的声明与调用，代码如下：

  1. function getTime(){  
  2.  
  3.         var dates = new Date();   //  dates返回当前最新时间。
  4.         var year = dates.getFullYear();    //获取年份
  5.         var month = dates.getMonth(); //获取月份
  6.         var da = dates.getDate(); //获取日期
  7.         var day = dates.getDay(); //获取星期几
  8.  
  9.         var hours = dates.getHours(); //获取小时
  10.         var min = dates.getMinutes(); //获取分钟
  11.         var sec = dates.getSeconds(); //获取秒
  12.         //week采用数组的形式，在div.innerText赋值过程中，提高了代码的简洁性。
  13.         var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  14.         // 由于时分秒存在一位数的情况，此时前面需要添“0”
  15.         hours = hours <10 ? "0"+ dates.getHours() :   dates.getHours() ;
  16.         min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
  17.         sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ; 
  18.  
  19.         var div = document.getElementById("div");
  20.         div.innerText = year+"年"+(month+1)+"月"+da+"日"+"  "+weeks[day]+"  "+hours+"："+min+"："+sec; 
  21.  
  22.         setTimeout(arguments.callee,1000);     // 每1s回调一次函数    法一
  23.      }

通过以上代码，函数体部分已经敲完了，只剩下调用getTime()函数。

但是由于每次刷新页面都会出现一次小卡顿，时间更新延迟，导致用户的体验效果不佳。

作为改进，我在函数体外部紧接着写了一下代码：

  1.   window.onload = function(){
  2.             getTime();
  3.    } //这是一个窗口加载完毕函数。作用：在每次刷新窗口，窗口加载完成后主动调用一次getTime函数，基本消除了刷新时的小卡顿。

到这里，我们这个实时页面刷新的小程序的效果就可以完全实现了。

上述延时方法采用的是递归调用，由于时间函数本身就是一个死循环，每执行完一次，间隔1s后就回调一次函数，可以实现时间的每秒更新。

还有第二种方法，也是大家普遍第一时间想到的方法——定时器，代码如下：

  1.    setInterval(getTime,1000);       // 法二 采用定时器 这行代码是需要调用getTime()函数的，因而写在了函数体外。

完整代码如下，留给大家作参考：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Time</title>
  6.     </head>
  7.     <body>
  8.         <div id="div"></div>
  9.         <script type="text/javascript">
  10.              function getTime(){
  11.                 var dates = new Date();   //  dates返回当前最新时间。
  12.                 var year = dates.getFullYear();    //获取年份
  13.                 var month = dates.getMonth(); //获取月份
  14.                 var da = dates.getDate(); //获取日期
  15.                 var day = dates.getDay(); //获取星期几
  16.                 var hours = dates.getHours(); //获取小时
  17.                 var min = dates.getMinutes(); //获取分钟
  18.                 var sec = dates.getSeconds(); //获取秒
  19.                 var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  20.  
  21.                 hours = hours <10 ? "0"+ dates.getHours() : dates.getHours() ;
  22.                 min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
  23.                 sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ; 
  24.  
  25.                 var div = document.getElementById("div");
  26.                 div.innerText = year+"年"+(month+1)+"月"+da+"日"+"  "+weeks[day]+"  "+hours+"："+min+"："+sec;
  27.  //      setTimeout(arguments.callee,1000);     // 每1s回调函数    法一
  28.        }
  29.                 setInterval(getTime,1000);       // 法二 定时器
  30.                 window.onload = function(){
  31.                 getTime();
  32.       }
  33.     </script>
  34.     </body>
  35. </html>

如果觉得好玩，可以动手敲敲试试看，自己敲出来的感觉就是不一样！

另附一丢丢CSS代码（纯属娱乐）：

  1. <style type="text/css">
  2.     #div1{
  3.         width: 800px;
  4.         height: 100px;
  5.         text-align: center;
  6.         line-height: 50px;
  7.         font-size: 28px;
  8.         font-family: "微软雅黑",sans-serif;
  9.         position: absolute;        /*时钟div在页面中水平垂直居中*/
  10.         top: 50%;
  11.         margin-top: -50px;
  12.         left: 50%;
  13.         margin-left: -400px;
  14.     }
  15. </style>

由于没有细致的去写CSS代码，页面显得很简陋，以后有机会我会对页面进行美化的，到时候找机会分享给大家~~

小女很用心写的，如果觉得有兴趣，欢迎收藏呦~~蟹蟹~~~

JS小福利 —— 实时更新的页面小时钟的更多相关文章

  1. IDEA不能实时更新jsp页面的问题

    第一步: 第二步 第三步: 将这三个选项 改成

  2. 解决 三星Note3 桌面小部件不实时更新/不刷新 的问题

    机型及问题描述:我的是三星note3 (国行 SM-N9008V),已ROOT,安装了LBE安全大师.在桌面小部件中,有些不会实时更新.比如有 滴答清单(办过的事项无法勾选),百度云音乐(歌曲播放更新 ...

  3. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  4. ueditor的工具栏显示乱码解决方法 小问题.. 是你的页面编码与语言包js编码不符所导致的

    ueditor的工具栏显示乱码解决方法 小问题..  是你的页面编码与语言包js编码不符所导致的解决方法:用记事本将ueditor\..\lang\zh-cn\zh-cn.js打开,然后保存为ANSI ...

  5. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  6. 什么？小程序实时语音识别你还在痛苦的对接科大讯飞？百度Ai识别？

    前言 微信小程序,说不上大火,但是需求还是不少的.各大企业都想插一足 于是前端同学就有事情做了. 需求 我需要录音 我边说话边识别,我要同声传译,我要文字转语音,还要萝莉音 我:??? 正文 一开始, ...

  7. 微信小程序客服消息开发实战：实时在手机上接收小程序客服消息通知，以及在手机上回复

    在微信小程序开发中,可以非常方便的集成客服功能,只需要一行代码便可以将用户引导至客服会话界面.这行代码就是: <button open-type="contact" bind ...

  8. web页面实时更新页面的原理--WebSocket

    原文:https://www.jianshu.com/p/8f956cd4d42b angular-cli启动的项目也可以自动刷新,底下应该也是应用的websocket的原理. ----------- ...

  9. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

随机推荐

  1. Git 使用问题 - win7 git bash下git pull失败

    win7 旗舰版,从github上pull代码时,git bash命令出现错误 Administrator@rust-PC /g/rust_proj/cardslib (master) $ git - ...

  2. Java IO 之 BIO、NIO、AIO

    1.BIO.NIO.AIO解释 Java BIO : 同步并阻塞 (Blocking IO) 一个连接一个线程 即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不 ...

  3. 用Node.JS+MongoDB搭建个人博客（成品展示）

    在博客里可以随意畅写和分享自己喜欢的技术,和网友分享知识也是一种提升.根据自己所发表的博客也能更加加深印象. 与此同时写博客也可以提高自己的写作能力(虽然不咋地),但我相信博客只会越写越有质量的. 博 ...

  4. select可选择、同时可自行输入

    HTML部分: <li class="bl-form-group"> <label>诊断医生</label> <div class=&qu ...

  5. 【HTML】DocType

    一.docType是什么 <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!D ...

  6. java对Microsoft Document的操作--->对Excel的操作

    起初,自己想对网站上爬取一些数据来写到Excel表格中,便在网上找了找java操作Excel接口,了解到Apache的POI接口可以对微软的文档进行操作,WIKI搜索的结果如下, HSSF - 提供读 ...

  7. Java curator操作zookeeper获取kafka

    Java curator操作zookeeper获取kafka Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更 ...

  8. TransactionTemplate编程式事务管理方式的进阶使用---自定义拓展模板类

    1, 前面一篇的文章介绍了TransactionTemplate的基本使用方法. 同事在其基础上又做了一层封装,这样更贴合本公司的业务与规范. 2, 首先定义了两个接口: ServiceTemplat ...

  9. 万能头文件#include

    #include<bits/stdc++.h>包含了目前c++所包含的所有头文件!!!! 测试结果POJ不支持HDU,NYOJ支持

  10. bower基本使用

    bower是什么? bower是基于nodejs的静态资源管理工具,由twitter公司开发.维护,使用它可以方便的安装.更新.卸载前端类库,同时解决类库之前的依赖关系. 依赖环境 bower依赖于n ...