javascript - JQuery Knob - 格式为 HH :mm:dd 的计时器

Question

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

例如:时间将显示“22:25:05”或“00:04:22”，剩余荷鲁斯/分/秒。

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

我如何设置一个可以使用的格式的计时器？谢谢

我的代码:

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 实现了您的要求插件。

根据您的要求我准备了两个演示。一种用于单日(24 小时)倒计时，另一种用于长天倒计时。请查看以下演示:

DEMO 1

DEMO 2

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

编辑:

根据当前日期，我更新了演示。此外，我还更新了每个圆圈的小时、分钟和秒的高级演示。

Updated DEMO

DEMO with separate sliders