JS小福利 —— 实时更新的页面小时钟

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

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

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

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

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

<body>

    <div id="div"> </div>

    <script type="text/javascript">

             // JS代码

    </script>

</body>

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

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

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

function getTime(){  

        var dates = new Date();   //  dates返回当前最新时间。

        var year = dates.getFullYear();    //获取年份

        var month = dates.getMonth(); //获取月份

        var da = dates.getDate(); //获取日期

        var day = dates.getDay(); //获取星期几

        var hours = dates.getHours(); //获取小时

        var min = dates.getMinutes(); //获取分钟

        var sec = dates.getSeconds(); //获取秒

        //week采用数组的形式，在div.innerText赋值过程中，提高了代码的简洁性。

        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

        // 由于时分秒存在一位数的情况，此时前面需要添“0”

        hours = hours <10 ? "0"+ dates.getHours() :   dates.getHours() ;

        min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes();

        sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ; 

        var div = document.getElementById("div");

        div.innerText = year+"年"+(month+1)+"月"+da+"日"+"  "+weeks[day]+"  "+hours+"："+min+"："+sec; 

        setTimeout(arguments.callee,1000);     // 每1s回调一次函数    法一

     }

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

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

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

  window.onload = function(){

            getTime();

   } //这是一个窗口加载完毕函数。作用：在每次刷新窗口，窗口加载完成后主动调用一次getTime函数，基本消除了刷新时的小卡顿。

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

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

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Time</title>

    </head>

    <body>

        <div id="div"></div>

        <script type="text/javascript">

             function getTime(){

                var dates = new Date();   //  dates返回当前最新时间。

                var year = dates.getFullYear();    //获取年份

                var month = dates.getMonth(); //获取月份

                var da = dates.getDate(); //获取日期

                var day = dates.getDay(); //获取星期几

                var hours = dates.getHours(); //获取小时

                var min = dates.getMinutes(); //获取分钟

                var sec = dates.getSeconds(); //获取秒

                var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

                hours = hours <10 ? "0"+ dates.getHours() : dates.getHours() ;

                min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes();

                sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ; 

                var div = document.getElementById("div");

                div.innerText = year+"年"+(month+1)+"月"+da+"日"+"  "+weeks[day]+"  "+hours+"："+min+"："+sec;

 //      setTimeout(arguments.callee,1000);     // 每1s回调函数    法一

       }

                setInterval(getTime,1000);       // 法二 定时器

                window.onload = function(){

                getTime();

      }

    </script>

    </body>

</html>

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

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

<style type="text/css">

    #div1{

        width: 800px;

        height: 100px;

        text-align: center;

        line-height: 50px;

        font-size: 28px;

        font-family: "微软雅黑",sans-serif;

        position: absolute;        /*时钟div在页面中水平垂直居中*/

        top: 50%;

        margin-top: -50px;

        left: 50%;

        margin-left: -400px;

    }

</style>

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

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

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

IDEA不能实时更新jsp页面的问题
第一步: 第二步第三步: 将这三个选项改成
解决三星Note3 桌面小部件不实时更新/不刷新的问题
机型及问题描述:我的是三星note3 (国行 SM-N9008V),已ROOT,安装了LBE安全大师.在桌面小部件中,有些不会实时更新.比如有滴答清单(办过的事项无法勾选),百度云音乐(歌曲播放更新 ...
React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
ueditor的工具栏显示乱码解决方法小问题.. 是你的页面编码与语言包js编码不符所导致的
ueditor的工具栏显示乱码解决方法小问题.. 是你的页面编码与语言包js编码不符所导致的解决方法:用记事本将ueditor\..\lang\zh-cn\zh-cn.js打开,然后保存为ANSI ...
微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
什么？小程序实时语音识别你还在痛苦的对接科大讯飞？百度Ai识别？
前言微信小程序,说不上大火,但是需求还是不少的.各大企业都想插一足于是前端同学就有事情做了. 需求我需要录音我边说话边识别,我要同声传译,我要文字转语音,还要萝莉音我:??? 正文一开始, ...
微信小程序客服消息开发实战：实时在手机上接收小程序客服消息通知，以及在手机上回复
在微信小程序开发中,可以非常方便的集成客服功能,只需要一行代码便可以将用户引导至客服会话界面.这行代码就是: <button open-type="contact" bind ...
web页面实时更新页面的原理--WebSocket
原文:https://www.jianshu.com/p/8f956cd4d42b angular-cli启动的项目也可以自动刷新,底下应该也是应用的websocket的原理. ----------- ...
小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

随机推荐

filezilla里怎么解决中文乱码问题
使用Filezilla client FTP客户端登陆某些FTP站点会出现中文乱码,原因是FTP服务器端编码与filezilla client端编码不一致造成的.解决方法如下:文件-站点管理-选中要登 ...
(转)$.extend()方法和(function($){...})(jQuery)详解
1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充
背景平常写组件,经常遇到需要获取内容放入组件内部的情形. 实现方法我们有两种实现方式 1. 自定义 props render 的时候通过获取 this.props.content 填充到组件内部 ...
Python-cookies
附新手工具: python新手工具下载链接:http://pan.baidu.com/s/1eS8WMR4 密码:7eso 注册码:http://idea.liyang.io py和编辑器安装教程链接 ...
【逻辑漏洞】基于BurpSuite的越权测试实战教程
一.什么是越权漏洞?它是如何产生的? 越权漏洞是Web应用程序中一种常见的安全漏洞.它的威胁在于一个账户即可控制全站用户数据.当然这些数据仅限于存在漏洞功能对应的数据.越权漏洞的成因主要是因为开发人员 ...
抓取60000+QQ空间说说做一次数据分析
对于QQ空间的数据一直来是垂涎不已,老早就想偷过来研究研究,这几天闲下来便开始动手... 整个程序的流程为:登录-->获取cookie-->获取所有的好友qq_number-->根据 ...
从Ubunt的安装到hadoop集群的搭建
一.相关基础配置 1.网络设置 a.调整VMnet8这块网卡网关 b.在VMware[编辑]->[虚拟网络编辑器]对VMnet8进线[NAT 设置] c.调整[DHCP 设置]中的起始IP地址 ...
Redis-事务即简单锁应用
Redis支持简单的事务, Redis允许一组命令在单一步骤中执行, 事务有两个属性事务是一个单独的隔离操作, 事务中所有的命令都会序列化, 按照顺序执行. Redis事务是原子性的, 即要么都执行 ...
调皮的QQ音乐API：修复无法获取歌单
上一篇完整版:http://www.cnblogs.com/TwilightLemon/p/7076938.html QQ音乐的API真是太调皮了,获取歌单的API又更换了好多次,喵喵喵旧版API( ...
关于Java JDK中 URLDecoder.decode 方法
java.net.URLDecoder.decode 在项目中碰到了个比较奇怪的问题,就是我在本地使用java.net.URLDecoder.decode(ruleName)方法解码,没有问题,本地的 ...

JS小福利 —— 实时更新的页面小时钟

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

随机推荐

热门专题