JQuery 旋钮 - 格式为 HH:mm:dd 的计时器

Question

我正在尝试设置格式为 HH:mm:dd 的计时器。

例如：时间将显示“22:25:05”或“00:04:22”，Horus/minutes/seconds 左边。

我设法让它显示时间，但无法使计时器工作并进行实时倒计时。

我怎样才能用这种格式设置一个计时器？谢谢

我的代码：

var now = moment();
var startDate = "16/03/2016 00:00:00";
var endDate = "16/03/2016 23:59:59";
diffHours = moment.utc(moment(endDate,"DD/MM/YYYY HH:mm:ss").diff(moment())).format("HH");
diffMinutes = moment.utc(moment(endDate,"DD/MM/YYYY HH:mm:ss").diff(moment())).format("mm");
diff = moment.utc(moment(endDate,"DD/MM/YYYY HH:mm:ss").diff(moment())).format("HH:mm:ss");
var percentage_complete = (now - moment(startDate,"DD/MM/YYYY HH:mm:ss")) / (moment(endDate,"DD/MM/YYYY HH:mm:ss") - moment(startDate,"DD/MM/YYYY HH:mm:ss")) * 100;
var percentage_rounded = (Math.round(percentage_complete * 100) / 100); 
jQuery("input.dial").attr("value",percentage_rounded);
jQuery(".dial").knob({
 'readOnly':true,
 'draw' : function () { 
     jQuery(this.i).val(diff); 
   }
});

Answer 1

根据您的评论，我已经使用 jQuery roundSlider 插件实现了您的要求。

根据您的要求我准备了两个demo。一个用于一天（24 小时）的倒计时，另一个用于长天的倒计时。请查看以下演示：

DEMO 1

DEMO 2

有关 roundSlider 的更多详细信息，请查看 demos and documentation 页面。

已编辑：

根据当前日期，我已经更新了演示。我还更新了每个圈子的高级演示，时间为小时、分钟和秒。

Updated DEMO

DEMO with separate sliders