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

最新推荐文章于 2023-10-26 14:30:29 发布

weixin_30906701

最新推荐文章于 2023-10-26 14:30:29 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tracey-1023/p/7460100.html

版权

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

这是一个有趣的时钟显示程序，可以进行实时的年月日、星期、时分秒更新，有了这组小代码，以后可以作为日期插件应用在大型的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>