javascript倒计时结束后，如何将网站访问者重定向到另一个URL？

Question

I've been playing with some javascript countdown code from codepen. It's basically some circles with animations and it displays the minutes, seconds and hours. Since I'm trying to learn more I thought it'd be a good idea to make a countdown website.

Thing is, I'm stuck. Presently, after the clock reaches the set date it starts counting upwards. What I'd like it to do instead is that after it hits 0 the user gets redirected to let's say Google.com

I've been messing with window.location but I can't seem to find where to fit this function.

This is the code:

 var ringer = { //countdown_to: "10/31/2014", countdown_to: "Fri Jul 08 2016 10:0:00 GMT-0500 (CDT)", rings: { 'HOURS': { s: 3600000, // mseconds per hour, max: 24 }, 'MINUTES': { s: 60000, // mseconds per minute max: 60 }, 'SECONDS': { s: 1000, max: 60 }, }, r_count: 3, r_spacing: 10, // px r_size: 110, // px r_thickness: 3, // 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'); $(document.body).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.8)"; $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(0, 0, 0, 1)"; $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 = "#ffffff"; $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(); 

Thanks for your help!

Answer 1

采用

document.location.href = "http://www.google.com";

Answer 2

Your callback method (the method to redirect the user) should be called with the go method. In this snippet,

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

the difference between the current time and the countdown time is calculated. Your callback method should be invoked when the time difference crosses 0. ie when the current time crosses the countdown time. Add the following code:

$r.time = (new Date().getTime()) - $r.countdown_to_time;
if($r.time >= 0) {
    callbackMethod()
}

Answer 3

Basically, your code appears to be by far more complex than it should (at least to me).

You should have:

1. A rendering function for the clock's display,
2. A countdown function,
3. A global variable that starts with the total number of (say) seconds and is updated down every time the timer kicks.

Having this, you initiate the global variable to, say, 120 seconds, create the timer (interval) with the countdown function as a callback; within the function, you update the display, update the value of the global variable and check if it is =0. If it is, you just kill the timer. That's it.

Except for the rendering function, all the other code should not be more than, say, 5 lines.

Answer 4

Have a span with id="sec" in your markup and put this code in.

var sec = 10;
var url = "http://www.google.com";
function tick() {
    if (sec) {
        document.getElementById("sec").innerHTML = sec;
        setTimeout(tick, 1000);
        sec--;
    } else {
        document.location.href = url;
    }
}

tick();

Answer 5

function tick(ticker) {
    if (ticker) {
        document.getElementById("sec").innerHTML = ticker;
        setTimeout(function() { 
           tick(--ticker);
        }, 1000);
    } else {
        document.location.href = "http://www.google.com";
    }
}

tick(10);