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

Question

我一直在玩一些来自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(); 

谢谢你的帮助！

Answer 1

采用

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

Answer 2

您的回调方法（重定向用户的方法）应使用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()
}

Answer 3

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

你应该有：

1. 时钟显示的渲染功能，
2. 倒数功能
3. 全局变量，以（例如）秒总数开始，并在每次计时器启动时向下更新。

有了这个，您可以启动全局变量，例如120秒，以倒数功能作为回调来创建计时器（间隔）。 在函数中，您可以更新显示，更新全局变量的值，并检查其是否为= 0。 如果是这样，您只需终止计时器即可。 而已。

除渲染功能外，所有其他代码的长度不得超过5行。

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

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