CODEWITHSUNDEEP
javascripthtmlhttp-redirect
Toshgarcia
Toshgarcia

Reputation: 31

How to redirect a website visitor to another url after javascript countdown ends?

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!

Upvotes: 2

Views: 555

Answers (5)

domino_katrino
domino_katrino

Reputation: 366

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);

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21638

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();

Upvotes: 0

Aditi
Aditi

Reputation: 106

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. i.e. 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()
}

Upvotes: 1

FDavidov
FDavidov

Reputation: 3675

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.

Upvotes: 0

M.Onyshchuk
M.Onyshchuk

Reputation: 165

Use 

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

Upvotes: 3

Related Questions