javascript - 如何使用 jQuery Knob 创建计数器时钟？

Question

我正在使用 jQuery.countdown 的多个实例。

如何使用 jQuery Knob 创建倒计时圆圈？

http://jsfiddle.net/qt3rteL5/

http://jsfiddle.net/26ppb5yc/1/ (重新加载预览帧以查看错误和结果)

jQuery.countdown 多个实例

<div data-countdown="2016/01/01"></div>
<div data-countdown="2017/01/01"></div>
<div data-countdown="2018/01/01"></div>
<div data-countdown="2019/01/01"></div>

jQuery 旋钮

<input class="knob days"  data-readOnly="true" data-insidelabel="Days" data-width="150" data-angleOffset="180" data-fgColor="#fff" data-skin="tron" data-thickness=".1" value="">
<input class="knob hours" data-max="24" data-readOnly="true" data-insidelabel="Hours"  data-width="150" data-angleOffset="180" data-fgColor="#fff" data-skin="tron" data-thickness=".1" value="">
<input class="knob minutes" data-max="60" data-readOnly="true" data-insidelabel="Minutes" data-width="150" data-angleOffset="180" data-fgColor="#fff" data-skin="tron" data-thickness=".1" value="">
<input class="knob second" data-max="60" data-readOnly="true" data-insidelabel="Seconds" data-width="150" data-angleOffset="180" data-fgColor="#fff" data-skin="tron" data-thickness=".1" value="">

如何改变值？

$(".second").val(seconds).trigger("change");
$(".minutes").val(minutes).trigger("change");
$(".hours").val(hours).trigger("change");
$(".days").val(days).trigger("change");

jQuery.countdown

jQuery Knob

我找到了 this但它对我不起作用。

旋钮圆圈出现几秒钟然后消失。

请帮帮我

Answer 1

试试这个。

 $('[data-countdown]').each(function() {
      var $this = $(this), finalDate = $(this).data('countdown');
      $this.countdown(finalDate, function(event) {
          knobjs();
         $this.html(event.strftime('<span class="knob days">%D</span> <span class="knob hours">%H</span> <span class="knob minutes">%M</span> <span class="knob second">%S</span>'));
       });
     }); 



 $(function() {
        $(".knob").knob();

        $(".second").val('%S').trigger("change");
        $(".minutes").val('%M').trigger("change");
        $(".hours").val('%H').trigger("change");
        $(".days").val('%D').trigger("change");
    });

 function knobjs()
    {
         $(".knob").knob();

            $(".second").val('%S').trigger("change");
            $(".minutes").val('%M').trigger("change");
            $(".hours").val('%H').trigger("change");
            $(".days").val('%D').trigger("change");
    }

http://jsfiddle.net/saravananmp/26ppb5yc/5/