JS-实现商品倒计时

                         



                            @if (item.Type == 1)
                            {
                                TimeSpan span = item.OrderEndTime - DateTime.Now;


                                
                                距离拼单结束：
                                @(span.Days.ToString().PadLeft(2, '0'))天
                                @(span.Hours.ToString().PadLeft(2, '0'))时
                                @(span.Minutes.ToString().PadLeft(2, '0'))分
                                @(span.Seconds.ToString().PadLeft(2, '0'))秒


                            }
                            else if (item.Type == 2)
                            {
                                集单尚未开始，敬请期待！
                            }
                            else
                            {
                                已结束
                            }
                        

下面是js

$.fn.extend({
    //计时器
    kjuiTimer: function (config) {
        /*
        config配置项
        max :               number           计时器最大值，默认值为5
        init:               number           计时器的初始值。默认为max,当该值不等于0时，计时器将自动开始计时
        before:             function         执行start函数之前执行，当返回值为false时，不执行start函数；默认值为true;
        start:              function         当计时器的值等于0且before返回值为true时，所执行的函数；
        step(counter）:     function         计时器每工作时,每秒执行的函数， counter为计时器当前的值，该值不会为0，等于0的情况执行end函数；
        end:                function         计时器值跳到0时，执行的函数；
        */


        //计时器的文本默认会显示在选择元素下面的 counter类中
        //计时器不可用时，选择的元素会加上 disabled 类,可用时移除disabled类


        config = $.extend({
            max: 5,
            init: 5,
            before: true,
            start: false,
            step: false,
            end: false

        }, config);

        var max = config.max;
        var init = config.init;
        var before = config.before;
        var start = config.start;
        var step = config.step;
        var end = config.end;

        var counter = init !== 0 ? init : max;
        var state = init === 0 ? true : false;
        var timer;

        $(this).each(function (index, ele) {


            if (!state) {
                $(ele).addClass("disabled");
                counter--;
                timer = setInterval(work, 1000);
            }
            if (start) {
                $(ele).click(function () {
                    if (state && before()) {
                        state = false;
                        $(ele).addClass("disabled");
                        start();
                        counter--;
                        timer = setInterval(work, 1000);

                    }

                });
            }

            function work() {
                if (counter !== 0) {
                    $(ele).find(".counter").text(counter);
                    if (step) {

                        step(counter);
                    }
                    counter--;

                } else {
                    $(ele).find(".counter").text("");
                    if (end) {
                        end();
                    }
                    state = true;
                    $(ele).removeClass("disabled");
                    clearInterval(timer);
                    counter = max;

                }
            }


        });
    },


   


    

    //秒表
    stopWatch: function (end) {
        /*
        秒表

        html结构
        

        天
        时
        分
        秒
        

        
        */

        $(this).each(function (index, ele) {
            var $d = $(ele).find(".d");
            var $h = $(ele).find(".h");
            var $m = $(ele).find(".m");
            var $s = $(ele).find(".s");
            var d = parseInt($d.text());
            var h = parseInt($h.text());
            var m = parseInt($m.text());
            var s = parseInt($s.text());

            var timer = setInterval(second, 1000);

            function second() {
                s--;
                if (s === 0 && m === 0 && h === 0 && d === 0) {
                    clearInterval(timer);
                    end(ele);
                    return;
                }

                if (s < 0) {
                    s = 59;
                    minute();
                }
                $s.text(s < 10 ? "0" + s : s);
            }

            function minute() {
                m--;
                if (m < 0) {
                    m = 59;
                    hour();
                }
                $m.text(m < 10 ? "0" + m : m);
            }

            function hour() {
                h--;
                if (h < 0) {
                    h = 23;
                    d--;
                    $d.text(d < 10 ? "0" + d : d);
                }
                $h.text(h < 10 ? "0" + h : h);
            }

        });
    },

    

    //增减框
    numberInput: function () {

        /*
     * min : 最小值 
     * step : 每次增长的值 例如data-step=50 每次增加50个  
     */
        $(this).each(function (index, ele) {
            var $input = $(ele).find("input");
            var min = $(ele).data("min");
            var step = $(ele).data("step") || 1;
            var flag = $(ele).data("flag") || 1;    //标识用来判断是否需要做失去焦点的检测
            var buy = $(ele).data("buy");           //购买数量
            if (buy) {
                //如果有购买数量 那么初始化的时候就不使用最小值
                $input.val(buy);
            } else {
                $input.val(min);
            }
            

            // $input.val(min);

            $input.blur(function () {
               
                if (flag === 1) {
                    //校验输入框的值 不为Nan，不小于最小值，为step的倍数
                    if (check($input, min, step)) {
                        $input.val(min);
                    }
                } else {
                    return;
                }
                
            });

            //数量加减
            $(ele).find(".add,.reduce").click(function () {
                var symbol = $(this).hasClass("add") ? 1 : -1;
                var newval = parseInt($input.val()) + symbol * step;


                if (newval < min) {
                    layer.msg("数量不能少于" + min + "哦");
                    newval = min;
                    $input.val(newval);
                } else {
                    $input.val(newval);
                }
                //newval = newval < min ? min : newval;
                //$input.val(newval);
            });
        });

        function check(obj, min, step) {
            var rect = /^[0-9]*$/;
            if (isNaN(obj.val()) || !rect.test(obj.val())) {
                layer.msg("必须填写整数");
                return true;
            }
            if (obj.val() < min) {
                layer.msg("数量不能少于" + min + "哦");
                return true;
            }
            if ((obj.val() - min) % step !== 0) {
                layer.msg("数量必须为" + step + "的倍数");
                return true;
            }
        }
    },


});