码迷,mamicode.com
首页 > Web开发 > 详细

jQuery简单倒计时插件

时间:2016-12-08 02:56:57      阅读:419      评论:0      收藏:0      [点我收藏+]

标签:计算   param   mat   cti   支持   使用   query   ++   class   

 

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简单倒计时插件

标签:计算   param   mat   cti   支持   使用   query   ++   class   

原文地址:http://www.cnblogs.com/cc11001100/p/6143250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!