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");
    }
  • 相关阅读:
    以淘宝商品搜索漫谈查询条件的排序对效率的影响(SQL查询性能优化,附调优(性能诊断)DMV)
    监测ASP.NET MVC网站
    在WCF中使用Ninject轻量级IOC框架 之 SOAP风格服务
    敏捷——SCRUM
    《scrum敏捷软件开发》读书笔记
    【双旦献礼】PortalBasic Java Web 应用开发框架 v3.0.1 正式发布(源码、示例及文档)
    前端架构
    Android源码学习之如何使用eclipse+NDK
    mass Framework attr模块 v3
    【转】iOS 6版本与之前版本差异总结
  • 原文地址:https://www.cnblogs.com/luluping/p/1436159.html
Copyright © 2011-2022 走看看