如果日期過期，我怎樣才能使這個JavaScript代碼倒數打印0-0-0-0？

Question

在JavaScript中我不太好，我需要這個倒計時代碼在4個圓圈中打印0，如果日期過期而不是打印確切的過期日期。

倒計時在Codepen上由用戶NoelPeña （感謝他，當然對於這個驚人的倒計時）：http://codepen.io/ewganoel/pen/AIGcE

這裏是JavaScript代碼：

var ringer = { 
countdown_to: "10/10/2014", 
rings: { 
'DAYS': { 
s: 86400000, // mseconds in a day, 
max: 365 
}, 
'HOURS': { 
s: 3600000, // mseconds per hour, 
max: 24 
}, 
'MINUTES': { 
s: 60000, // mseconds per minute 
max: 60 
}, 
'SECONDS': { 
s: 1000, 
max: 60 
}, 
'MICROSEC': { 
s: 10, 
max: 100 
} 
}, 
r_count: 5, 
r_spacing: 10, // px 
r_size: 100, // px 
r_thickness: 5, // px 
update_interval: 11, // ms 


init: function(){ 

$r = ringer; 
$r.cvs = document.createElement('canvas'); 

$r.size = { 
w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
h: ($r.r_size + $r.r_thickness) 
}; 



$r.cvs.setAttribute('width',$r.size.w); 
$r.cvs.setAttribute('height',$r.size.h); 
$r.ctx = $r.cvs.getContext('2d'); 
$(".countdownwrap").append($r.cvs); 
$r.cvs = $($r.cvs); 
$r.ctx.textAlign = 'center'; 
$r.actual_size = $r.r_size + $r.r_thickness; 
$r.countdown_to_time = new Date($r.countdown_to).getTime(); 
$r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" }); 
$r.go(); 
}, 
ctx: null, 
go: function(){ 
var idx=0; 

$r.time = (new Date().getTime()) - $r.countdown_to_time; 


for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]); 

setTimeout($r.go,$r.update_interval); 
}, 
unit: function(idx,label,ring) { 
var x,y, value, ring_secs = ring.s; 
value = parseFloat($r.time/ring_secs); 
$r.time-=Math.round(parseInt(value)) * ring_secs; 
value = Math.abs(value); 

x = ($r.r_size*.5 + $r.r_thickness*.5); 
x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness)); 
y = $r.r_size*.5; 
y += $r.r_thickness*.5; 


// calculate arc end angle 
var degrees = 360-(value/ring.max) * 360.0; 
var endAngle = degrees * (Math.PI/180); 

$r.ctx.save(); 

$r.ctx.translate(x,y); 
$r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size); 

// first circle 
$r.ctx.strokeStyle = "rgba(128,128,128,0.2)"; 
$r.ctx.beginPath(); 
$r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2); 
$r.ctx.lineWidth =$r.r_thickness; 
$r.ctx.stroke(); 

// second circle 
$r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)"; 
$r.ctx.beginPath(); 
$r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1); 
$r.ctx.lineWidth =$r.r_thickness; 
$r.ctx.stroke(); 

// label 
$r.ctx.fillStyle = "#000000"; 

$r.ctx.font = '12px Helvetica'; 
$r.ctx.fillText(label, 0, 23); 
$r.ctx.fillText(label, 0, 23); 

$r.ctx.font = 'bold 40px Helvetica'; 
$r.ctx.fillText(Math.floor(value), 0, 10); 

$r.ctx.restore(); 
} 
} 

ringer.init(); 

非常感謝提前

Answer 1

不僅僅是C將countdown_to時間改爲未來日期。

和更新代碼

if(((new Date().getTime()) - $r.countdown_to_time)<0) 
    $r.time = (new Date().getTime()) - $r.countdown_to_time; 
else $r.time = 0; 

檢查如果當前new Date().getTime()到countdown_to_time的差大於零，那麼將其設置爲零。

下面是一個例子，

var ringer = { 
 
    countdown_to: "1/10/2017", 
 
    rings: { 
 
    'DAYS': { 
 
     s: 86400000, // mseconds in a day, 
 
     max: 365 
 
    }, 
 
    'HOURS': { 
 
     s: 3600000, // mseconds per hour, 
 
     max: 24 
 
    }, 
 
    'MINUTES': { 
 
     s: 60000, // mseconds per minute 
 
     max: 60 
 
    }, 
 
    'SECONDS': { 
 
     s: 1000, 
 
     max: 60 
 
    }, 
 
    'MICROSEC': { 
 
     s: 10, 
 
     max: 100 
 
    } 
 
    }, 
 
    r_count: 5, 
 
    r_spacing: 10, // px 
 
    r_size: 100, // px 
 
    r_thickness: 5, // px 
 
    update_interval: 11, // ms 
 

 

 
    init: function() { 
 

 
    $r = ringer; 
 
    $r.cvs = document.createElement('canvas'); 
 

 
    $r.size = { 
 
     w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing * ($r.r_count - 1)), 
 
     h: ($r.r_size + $r.r_thickness) 
 
    }; 
 

 

 

 
    $r.cvs.setAttribute('width', $r.size.w); 
 
    $r.cvs.setAttribute('height', $r.size.h); 
 
    $r.ctx = $r.cvs.getContext('2d'); 
 
    $(".countdownwrap").append($r.cvs); 
 
    $r.cvs = $($r.cvs); 
 
    $r.ctx.textAlign = 'center'; 
 
    $r.actual_size = $r.r_size + $r.r_thickness; 
 
    $r.countdown_to_time = new Date($r.countdown_to).getTime(); 
 
    $r.cvs.css({ 
 
     width: $r.size.w + "px", 
 
     height: $r.size.h + "px" 
 
    }); 
 
    $r.go(); 
 
    }, 
 
    ctx: null, 
 
    go: function() { 
 
    var idx = 0; 
 

 
    if (((new Date().getTime()) - $r.countdown_to_time) < 0) 
 
     $r.time = (new Date().getTime()) - $r.countdown_to_time; 
 
    else $r.time = 0; 
 

 
    for (var r_key in $r.rings) $r.unit(idx++, r_key, $r.rings[r_key]); 
 

 

 
    setTimeout($r.go, $r.update_interval); 
 
    }, 
 
    unit: function(idx, label, ring) { 
 
    var x, y, value, ring_secs = ring.s; 
 
    value = parseFloat($r.time/ring_secs); 
 
    $r.time -= Math.round(parseInt(value)) * ring_secs; 
 
    value = Math.abs(value); 
 

 
    x = ($r.r_size * .5 + $r.r_thickness * .5); 
 
    x += +(idx * ($r.r_size + $r.r_spacing + $r.r_thickness)); 
 
    y = $r.r_size * .5; 
 
    y += $r.r_thickness * .5; 
 

 

 
    // calculate arc end angle 
 
    var degrees = 360 - (value/ring.max) * 360.0; 
 
    var endAngle = degrees * (Math.PI/180); 
 

 
    $r.ctx.save(); 
 

 
    $r.ctx.translate(x, y); 
 
    $r.ctx.clearRect($r.actual_size * -0.5, $r.actual_size * -0.5, $r.actual_size, $r.actual_size); 
 

 
    // first circle 
 
    $r.ctx.strokeStyle = "rgba(128,128,128,0.2)"; 
 
    $r.ctx.beginPath(); 
 
    $r.ctx.arc(0, 0, $r.r_size/2, 0, 2 * Math.PI, 2); 
 
    $r.ctx.lineWidth = $r.r_thickness; 
 
    $r.ctx.stroke(); 
 

 
    // second circle 
 
    $r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)"; 
 
    $r.ctx.beginPath(); 
 
    $r.ctx.arc(0, 0, $r.r_size/2, 0, endAngle, 1); 
 
    $r.ctx.lineWidth = $r.r_thickness; 
 
    $r.ctx.stroke(); 
 

 
    // label 
 
    $r.ctx.fillStyle = "#000000"; 
 

 
    $r.ctx.font = '12px Helvetica'; 
 
    $r.ctx.fillText(label, 0, 23); 
 
    $r.ctx.fillText(label, 0, 23); 
 

 
    $r.ctx.font = 'bold 40px Helvetica'; 
 
    $r.ctx.fillText(Math.floor(value), 0, 10); 
 

 
    $r.ctx.restore(); 
 
    } 
 
} 
 

 
ringer.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="countdownwrap"></div>