jQuery简单倒计时插件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery简单倒计时插件相关的知识,希望对你有一定的参考价值。

 

1. 按照特定的类结构布局。

2. 需要先引入jQuery,再引入此文件。

 

/**
 * 简单倒计时
 * 
 * 支持页面内同时存在多个计时器并且不互相干扰
 *
 * Usage:
 * 
 *         <div class="timer-simple-seconds" timer="3600">
 *            <span class="hour">hour</span>小时<span class="minute">minute</span>分<span class="second">second</span>秒
 *        </div>
 * 
 */
$(function(){
    
    //对所有的计时器进行处理
    var timers=$(".timer-simple-seconds");
    for(var i=0;i<timers.length;i++){
        //先调用一次,避免误差
        processTimer($(timers[i]));
        setInterval(processTimer,1000,$(timers[i]));
    }
    
    /**
     * 对时间进行处理
     * @param {Object} timer
     */
    function processTimer(timer){
        var total=parseInt(timer.attr("timer"));
        
        //倒计时不能为负
        if(total<0) return;
        
        //找到显示时分秒的元素
        var hour=timer.find(".hour");
        var minute=timer.find(".minute");
        var second=timer.find(".second");
        
        //计算应该显示的数值
        var h=Math.floor(total/(60*60));
        var m=Math.floor(Math.floor((total-h*60*60)/60));
        var s=total-h*60*60-m*60;
        
        //补位
        if(m<10) m="0"+m;
        if(s<10) s="0"+s;
        
        //显示
        hour.text(h);
        minute.text(m);
        second.text(s);
        
        //记录数值,留待下次使用
        total--;
        timer.attr("timer",total);
    }
    
});

 

以上是关于jQuery简单倒计时插件的主要内容,如果未能解决你的问题,请参考以下文章

Jquery插件 防刷新倒计时 “点击获取验证码后60秒内禁止重新获取

第一次写jquery插件,来个countdown计时器吧

jquery插件之倒计时-团购秒杀

jQuery自适应倒计时插件

如果用户没有使用浏览器,则jQuery计时器停止

jquery倒计时插件,日期来自Mysql数据库