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.
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); } });
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.