JS简单的倒计时(代码优化)

倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时。

JS代码如下:

/*
 * js简单的倒计时
 * @param {date,obj} 日期 对象格式
 */

 function CountDown(date,obj) {
    var self = this;
    self.date = date;
    self.obj = obj;
    self._init();
 };

 $.extend(CountDown.prototype,{

    _init: function(){
        var self = this,
            obj = self.obj;
        var dateTime = self._calculateTime();

        if(obj.sec) {
            $(obj.sec).html(dateTime.sec);
        }
        if(obj.mini) {
            $(obj.mini).html(dateTime.mini);
        }
        if(obj.hour) {
            $(obj.hour).html(dateTime.hour);
        }
        if(obj.day) {
            $(obj.day).html(dateTime.day);
        }
        if(obj.month) {
            $(obj.month).html(dateTime.month);
        }
        if(obj.year) {
            $(obj.year).html(dateTime.year);
        }
        // setInterval 会有误差 大概每小时有5秒的误差 故用setTimeout做计时器 精准更高
        t && clearTimeout(t);
        var t = setTimeout(function(){
            self._init();
        }, 1000);
    },
    _zero: function(n){
        var n = parseInt(n,10);
        if(n > 0) {
            if(n < 10) {
                n = "0" + n;
            }
            return String(n);
        }else {
            return n = "00";
        }
    },
    _calculateTime: function(){
        var self = this,
            date = self.date || Date.UTC(2050, 0, 1);
        var end = new Date(date),
            now = new Date();

        // getTimezoneOffset() 方法可返回格林威治时间和本地时间之间的时差,以分钟为单位。
        var leftTime = Math.round((end.getTime() - now.getTime())/1000) + end.getTimezoneOffset() * 60;
        var obj = {
            sec: "00",
            mini: "00",
            hour: "00",
            day: "00",
            month: "00",
            year: "0"
        };
        if(leftTime > 0) {
            obj.sec = self._zero(leftTime % 60);
            obj.mini = Math.floor(leftTime / 60) > 0 ? self._zero(Math.floor(leftTime / 60) % 60) : "00";
            obj.hour = Math.floor(leftTime / 3600) > 0 ? self._zero(Math.floor(leftTime/3600) % 24) : "00";
            obj.day = Math.floor(leftTime / (24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (24*3600)) % 30) : "00";
            obj.month = Math.floor(leftTime / (30 * 24 * 3600)) > 0 ? self._zero(Math.floor(leftTime / (30 * 24 * 3600)) % 12) : "00";
            //年份,按按回归年360天秒算
            obj.year = Math.floor(leftTime / (360 * 30 * 24 * 3600)) > 0 ? Math.floor(leftTime / (360 * 30 * 24 * 3600)) : "0";
        }
        return obj;
    }
 });

假如HTML如下:

<span class="hour"></span>时 <span class="mini"></span>分 <span class="sec"></span>秒

那么我们可以这样初始化代码:

var d = 1419509471000;
    //var d = Date.UTC(2030, 6, 27, 16, 34);
var obj = {
    sec: $(".sec"),
    mini: $(".mini"),
     hour: $(".hour")
}
new CountDown(d, obj);

JSfiddler倒计时演示

JS简单的倒计时(代码优化),布布扣,bubuko.com

时间: 2024-12-15 01:40:23

JS简单的倒计时(代码优化)的相关文章

js简单时分秒倒计时

最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>简单时长倒计时</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一个小时,按秒计算,自己调整! 7

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

简单的倒计时

上篇写到了倒计时的效果实现,现在分享一个简单的倒计时案例,不多说直接上代码 HTML部分: <div id="box"> <h1>倒计时</h1> <div class="container"> <span class="hour">1</span> <span class="minute">2</span> <span cl

zepto-selector.js简单分析

zepto 的selector模块是对jquery扩充选择器(jquery-selector-extensions)的部分实现.比如这样的选择方法:$('div:first') 和 el.is(':visible'). 下面是原代码,简单的写了一些注释- ;(function($){ var zepto = $.zepto, oldQsa = zepto.qsa, oldMatches = zepto.matches /* * 检察一个元素是否可见.除了要判断display是否是none之外,还

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd

JS简单示例

首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:https://github.com/CharlesQQ/Python_Data_Analyse/tree/master/js%E5%AD%A6%E4%B9%A0 1.看一个简单的例子,有如下需求 需求:点击按钮,背景变为黄色; 分析: 步骤: 1.拿到按钮 document.getElementByid

js简单实现链式调用

链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show = function() {   console.log('show');   return this;  }  Object.prototype.hide = function() {   console.log('hide');   return this;  }  var div = doc

JS简单加密

//简单的jS加密解密//code为对应的字符串,h为(2,8,10,16)就是要转成的几进制function en(code, h) { var monyer = new Array();var i,s; for(i=0;i<code.length;i++) monyer+=code.charCodeAt(i).toString(h)+"_"; //就是把字符串转成ascll码,然后再转成你想的几进制 return monyer; }; //同上 function de(cod