zoukankan      html  css  js  c++  java
  • jQuery插件倒计时。

    这个倒计时的构思比较巧妙,呵呵,我自认为的。
    计时调用 通过jquery的animate()方法。
    计时停止 通过jquery的stop()方法。
    而重新开始计时则使用了 jquery的data()方法记录一些变量,使之重新开始。

    Demo:
    http://cssrain.cn/demo/timecount.html

    源代码注释:
    jQuery.fn.countDown = function(settings,to) {
        if(!to && to != settings.endNumber) { to = settings.startNumber; }
        this.data("CR_currentTime",to);
        $(this).text(to).animate({"none":"none"},settings.duration,'',function() {
            if(to > settings.endNumber + 1) {
                $(this).countDown(settings,to - 1);
            }else{
                settings.callBack(this);
            }
        });        
        return this;
    };
    //计时&&重新计时
    jQuery.fn.CRcountDown = function(settings) {
        settings = jQuery.extend({
            startNumber: 10,
            endNumber: 0,
            duration: 1000,
            callBack: function() { }
        }, settings);
        this.data("CR_duration",settings.duration);
        this.data("CR_endNumber",settings.endNumber);
        this.data("CR_callBack",settings.callBack);
        return this.stop().countDown(settings);
    };
    //计时暂停
    jQuery.fn.pause = function(settings) {
        return this.stop();
    };
    //暂停后,重新开始
    jQuery.fn.reStart = function() {
        return this.pause().CRcountDown({
            startNumber : this.data("CR_currentTime"),
            duration :     this.data("CR_duration"),
            endNumber : this.data("CR_endNumber"),
            callBack : this.data("CR_callBack")
        });
    };



    使用方法:
    // 开始 && 重新开始
    $("#start").click(function(){
        $("#test").CRcountDown({
                    startNumber:15,
                    callBack:test
                })
                .css("color","red");
    });
    // 暂停
    $("#pause").click(function(){
        $("#test").pause();
    });
    // 暂停后 重新开始
    $("#again").click(function(){
        $("#test").reStart();
    });
    function test(){
        $("<p>计时1结束!</p>")
                  .hide()
                  .fadeIn(1000)
                  .appendTo("body");
    }
  • 相关阅读:
    迈瑞医疗招聘-软件测试工程师
    软件自动化测试开发-3期开班啦
    luogu P2744 [USACO5.3]量取牛奶Milk Measuring
    luogu P2515 [HAOI2010]软件安装
    luogu P2423 双塔
    luogu P1651 塔
    luogu P1489 猫狗大战
    luogu P3092 [USACO13NOV]没有找零No Change
    luogu P3800 Power收集
    luogu P2949 [USACO09OPEN]工作调度Work Scheduling
  • 原文地址:https://www.cnblogs.com/luluping/p/1436159.html
Copyright © 2011-2022 走看看