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

【问题标题】：How to redirect a website visitor to another url after javascript countdown ends?javascript倒计时结束后如何将网站访问者重定向到另一个网址？
【发布时间】：2016-07-05 05:15:05
【问题描述】：

我一直在玩一些来自 codepen 的 javascript 倒计时代码。它基本上是一些带有动画的圆圈，它显示分钟、秒和小时。因为我想了解更多，所以我认为做一个倒计时网站是个好主意。

问题是，我被困住了。目前，时钟到达设定的日期后，它开始向上计数。我希望它做的是，在它达到 0 后，用户会被重定向到 Google.com

我一直在搞乱 window.location，但我似乎无法找到适合此功能的位置。

这是代码：

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

感谢您的帮助！

【问题讨论】：

您提供的示例代码执行时出错，请检查

标签： javascript html url-redirection

【解决方案1】：

使用

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

【讨论】：

最好在您发布的代码中添加解释作为答案，这样可以帮助访问者理解为什么这是一个好的答案。

【解决方案2】：

你的回调方法（重定向用户的方法）应该用 go 方法调用。在这个sn-p中，

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

计算当前时间和倒计时时间之间的差值。当时间差超过 0 时，应调用您的回调方法。即当当前时间超过倒计时时间时。添加以下代码：

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

【讨论】：

谢谢！我用@M.Onyshchuk 回答添加了这个，效果很好！

【解决方案3】：

基本上，您的代码似乎比应有的复杂得多（至少对我而言）。

你应该有：

时钟显示的渲染函数，
倒计时功能，
一个全局变量，以总秒数（比如）秒数开始，每次计时器启动时都会向下更新。

有了这个，你启动全局变量，比如 120 秒，创建计时器（间隔），倒计时函数作为回调；在函数中，您更新显示，更新全局变量的值并检查它是否为 =0。如果是，您只需终止计时器。就是这样。

除渲染函数外，其他所有代码不应超过 5 行。

【讨论】：

是的，我同意它有点复杂，我基本上只是在玩 codepen 的东西，看看我能学到什么。

【解决方案4】：

在您的标记中有一个 id="sec" 的跨度并将此代码放入。

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

【讨论】：

【解决方案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);

【讨论】：