JS-实现商品倒计时

<div class="h6 timer">

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

<span class="kjicon kjicon-clock h3 fcolor-main"></span>
<text>距离拼单结束：</text>
<span><b class="d h3">@(span.Days.ToString().PadLeft(2, '0'))</b>天</span>
<span><b class="h h3">@(span.Hours.ToString().PadLeft(2, '0'))</b>时</span>
<span><b class="m h3">@(span.Minutes.ToString().PadLeft(2, '0'))</b>分</span>
<span><b class="s h3">@(span.Seconds.ToString().PadLeft(2, '0'))</b>秒</span>

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

下面是js

$.fn.extend({//计时器kjuiTimer: function (config) {/*config配置项max :               number           计时器最大值，默认值为5init:               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) {/*秒表9831html结构<div class="demo"><span ><span class="d"></span>天</span><span ><span class="h"></span>时</span><span ><span class="m"></span>分</span><span ><span class="s"></span>秒</span><div>*/$(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;}}},});