0

I'm trying to set a timer with format HH:mm:dd.

Ex: The time will show "22:25:05" or "00:04:22" with the Horus/minutes/seconds left.enter image description here

I manged to get it to show the time, but can't make the timer work and do live countdown.

How could i set a timer with this format that will work? Thanks

My code:

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); 
   }
});
Soundar
  • 2,569
  • 1
  • 16
  • 24
BenB
  • 2,747
  • 3
  • 29
  • 54
  • Can i provide the solution with any other similar alternate plugin ? or you need to use jQuery knob alone ? – Soundar Mar 16 '16 at 11:00
  • @SoundarR Sure. Any solution is good as long that it will be like the image i added. – BenB Mar 16 '16 at 11:01

1 Answers1

1

As per your comment, I have achieved your requirement using jQuery roundSlider plugin.

Based on your requirement i have prepared two demos. One for countdown with single day (24 hours) and another for countdown with long days. Please check the below demos:

DEMO 1

DEMO 2

For more details about roundSlider check the demos and documentation page.

Edited:

Based on the current date i have updated the demo. Also i have updated an advanced demo with each circle for hours, minutes and seconds.

Updated DEMO

DEMO with separate sliders

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Demo 1 dosent work, but i think i will use demo 2, Thanks! – BenB Mar 16 '16 at 23:26
  • Actually both the demo will works, but in that demo you need to change the start and end date based on the current date... So i have updated the generic demo for all days.. – Soundar Mar 19 '16 at 18:47