簡體   English   中英

jQuery旋鈕-計時器,格式為HH:mm:dd

[英]JQuery Knob - Timer with format HH:mm:dd

我正在嘗試設置格式為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); } }); 

根據您的評論,我已經使用jQuery roundSlider插件達到了您的要求。

根據您的要求,我准備了兩個演示。 一種用於單日(24小時)倒計時,另一種用於長日倒計時。 請檢查以下演示:

DEMO 1

DEMO 2

有關roundSlider的更多詳細信息,請查看演示文檔頁面。

編輯:

基於當前日期,我已經更新了演示。 另外,我已經用每個小時,幾分鍾和幾秒鍾更新了一個高級演示。

Updated DEMO

DEMO with separate sliders

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM