• 技术文章 >web前端 >js教程

    网页实时显示服务器时间和javscript自运行时钟_javascript技巧

    2016-05-16 16:45:12原创838
    最近项目网页需要实时显示服务器时间,如果每秒通过ajax加载服务器时间的话,就会产生大量的请求。

    于是设计了“javscript自运行时钟” 和 "ajax加载服务器时间" 相结合的形式来显示服务器时间。“javscript自运行时钟” 以某初始时间为起点自动运行,"ajax加载服务器时间" 每60s将服务器的时间给“javscript自运行时钟” 更新。

    javscript自运行时钟:
    复制代码 代码如下:

    /*!
    * File: sc_clock.js
    * Version: 1.0.0
    * Author: LuLihong
    * Date: 2014-06-06
    * Desc: 自动运行的时钟
    *
    * 版权:开源,随便使用,请保持头部。
    */

    /**
    * 格式化输出
    * @returns
    */
    String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
    };

    /**
    * 转化为数字
    * @returns
    */
    String.prototype.toInt = function(defaultV) {
    if (this === "" || !(/^\d+$/.test(this))) return defaultV;
    return parseInt(this);
    };

    window.scClock =
    {
    year : 2014,
    month : 1,
    day : 1,
    hour : 0,
    minute : 0,
    second : 0,

    isRunning : false,
    /**
    * 显示时间的函数,调用者在调用startup函数时传入。
    */
    showFunc : function(){},

    /**
    * 初始化
    */
    init : function(y, mon, d, h, min, s){
    this.year = y;
    this.month = mon;
    this.day = d;
    this.hour = h;
    this.minute = min;
    this.second = s;
    },

    /**
    * 初始化时间:时间格式:2014-06-09 11:30:30
    */
    updateTime : function(time) {
    var arr = time.split(/[\-\ \:]/);
    if (arr.length != 6) return;

    this.year = arr[0].toInt(2014);
    this.month = arr[1].toInt(1);
    this.day = arr[2].toInt(1);
    this.hour = arr[3].toInt(0);
    this.minute = arr[4].toInt(0);
    this.second = arr[5].toInt(0);
    },

    /**
    * 更新时间:时间格式:2014-06-09 11:30:30
    */
    updateTime : function(time) {
    var arr = time.split(/[\-\ \:]/);
    if (arr.length != 6) return;

    this.year = arr[0].toInt(2014);
    this.month = arr[1].toInt(1);
    this.day = arr[2].toInt(1);
    this.hour = arr[3].toInt(0);
    this.minute = arr[4].toInt(0);
    this.second = arr[5].toInt(0);
    },

    /**
    * 开始
    */
    startup : function(func) {
    if (this.isRunning) return;
    this.isRunning = true;
    this.showFunc = func;
    window.setTimeout("scClock.addOneSec()", 1000);
    },

    /**
    * 结束
    */
    shutdown : function() {
    if (!this.isRunning) return;
    this.isRunning = false;
    },

    /**
    * 获取时间
    */
    getDateTime : function() {
    var fmtString = "{0}-{1}-{2} {3}:{4}:{5}";
    var sMonth = (this.month < 10) ? ("0" + this.month) : this.month;
    var sDay = (this.day < 10) ? ("0" + this.day) : this.day;
    var sHour = (this.hour < 10) ? ("0" + this.hour) : this.hour;
    var sMinute = (this.minute < 10) ? ("0" + this.minute) : this.minute;
    var sSecond = (this.second < 10) ? ("0" + this.second) : this.second;
    return fmtString.format(this.year, sMonth, sDay, sHour, sMinute, sSecond);
    },

    /**
    * 增加一秒
    */
    addOneSec : function() {
    this.second++;
    if (this.second >= 60) {
    this.second = 0;
    this.minute++;
    }
    if (this.minute >= 60) {
    this.minute = 0;
    this.hour++;
    }
    if (this.hour >= 24) {
    this.hour = 0;
    this.day++;
    }
    switch(this.month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12: {
    if (this.day > 31) {
    this.day = 1;
    this.month++;
    }
    break;
    }
    case 4:
    case 6:
    case 9:
    case 11: {
    if (this.day > 30) {
    this.day = 1;
    this.month++;
    }
    break;
    }
    case 2: {
    if (this.isLeapYear()) {
    if (this.day > 29) {
    this.day = 1;
    this.month++;
    }
    } else if (this.day > 28) {
    this.day = 1;
    this.month++;
    }
    break;
    }
    }
    if (this.month > 12) {
    this.month = 1;
    this.year++;
    }

    this.showFunc(this.getDateTime());

    if (this.isRunning)
    window.setTimeout("scClock.addOneSec()", 1000);
    },

    /**
    * 检测是否为闰年: 判断闰年的规则是,能被4整除,但能被100整除的不是闰年,能被400整除为闰年.
    */
    isLeapYear : function() {
    if (this.year % 4 == 0) {
    if (this.year % 100 != 0) return true;
    if (this.year % 400 == 400) return true;
    }
    return false;
    }

    };

    调用代码:
    复制代码 代码如下:

    /**
    * 开始系统时间
    */
    function startupClock() {
    if (window.scClock) {
    window.scClock.startup(function(time){
    $("#currTime").text(time);
    });
    }
    }
    /**
    * 加载系统时间
    */
    function loadSystemTime() {
    var jsonData = {
    "ajaxflag": 1,
    "mod": "time_mod"
    };
    $.getJSON(ajax_sc_url, jsonData, function(data){
    if (data.code==0) {
    if (window.scClock)
    window.scClock.updateTime(data.time);
    }
    });
    setTimeout("loadSystemTime()", 60000);
    }

    html显示代码:
    复制代码 代码如下:


    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:json中换行符的处理方法示例介绍_javascript技巧 下一篇:Jquery焦点与失去焦点示例应用_jquery
    PHP编程就业班

    相关文章推荐

    • 一文快速了解JS中的柯里化(Currying)• javascript怎么去除字符串前两位• 聊聊Node(节点)和Element(元素)有什么区别?• javascript怎么将小数转化为百分数• Angular学习之浅析Ivy编译器中的增量DOM

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网