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

我一直在玩Codepen的一些JavaScript倒计时代码。它基本上是一些带有动画的圈子，它显示分钟，秒和小时。由于我想了解更多，我认为制作倒计时网站是个好主意。如何在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();

感谢您的帮助！

来源

2016-07-05 Toshgarcia

您提供的样本代码，同时执行有错误。请检查它 –

应该使用go方法调用您的回调方法（重定向用户的方法）。在该片段中，

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

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

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

来源

2016-07-05 05:48:53 Aditi

谢谢！我用@ M.Onyshchuk的答案加了这个，它效果很好！ – Toshgarcia

使用

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

来源

2016-07-05 05:33:27

最好向你发布的代码添加一个解释来作为答案，这样可以帮助访问者理解为什么这是一个很好的答案。 – abarisone

基本上，你的代码看起来是比它应该要复杂得多（至少对我来说）。

你应该有：

在时钟的显示渲染功能，
的倒计时功能，
与（比如说）的总秒数开始，已关闭更新的全局变量每次计时器踢。

有了这个，你启动全局变量，比如120秒，用倒计数函数创建定时器（间隔）作为回调;在函数内，您更新显示，更新全局变量的值并检查它是否为0。如果是这样，你只需要杀死计时器。而已。

除了渲染功能，所有其他代码不应超过5行。

来源

2016-07-05 05:38:42 FDavidov

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

曾与您的标记ID =“秒”的跨度，并把这个代码

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

来源

2016-07-05 05:56:07

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

来源

2016-07-05 06:39:17

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

回答

相关问题