如何在javascript倒计时结束后将网站访问者重定向到另一个url
How to redirect a website visitor to another url after javascript countdown ends?
我一直在玩一些javascript倒计时代码从codepen。它基本上是一些带有动画的圆圈,它显示分,秒和小时。既然我想了解更多,我想做一个倒计时网站是个好主意。
问题是,我被困住了。现在,当时钟到达设定的日期后,它开始向上计数。我想让它达到0后用户被重定向到比如google。com我一直在摆弄窗户。位置,但我似乎找不到适合这个功能的位置。
这是代码:
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();
谢谢你的帮助!
使用
document.location.href = "http://www.google.com";
您的回调方法(重定向用户的方法)应该与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()
}
基本上,你的代码看起来比它应该的要复杂得多(至少对我来说)。
你应该有:
- 时钟显示的渲染函数,
- 倒计时功能,
- 一个全局变量,从总秒数开始,每次计时器启动时更新。
有了这个,你初始化全局变量,说,120秒,创建定时器(间隔)与倒计时函数作为回调;在函数中,更新显示,更新全局变量的值并检查它是否为=0。如果是,你就关掉计时器。就是这样。
除了呈现函数,其他所有代码都不应该超过5行。
在您的标记中添加一个id="sec"的span,并将此代码放入。
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();
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);
相关文章:
- 获取网站访问者的区域设置(语言)
- 可靠地检测网站的新访问者
- 如何让您的网站访问者从您的网站关注 Twitter 帐户
- 如何从另一个网站获取访问者数量
- 如何查看我的 asp.net 网站的实时访问者数量
- 如何在访问者访问我的网站后几秒钟显示 facebook 框模式
- 第三方(随机网站访问者)是否有可能通过 php 表单更新.html索引文件中的某些.js代码
- 嵌入贪吃蛇游戏以吸引网站访问者,而页面/模块被加载到网站中
- 如何判断访问者是否正在通过手机访问网站
- 如何创建Google Analytics事件跟踪来记录访问者退出网站之前最后关注的表单字段
- 重定向未刷新或点击任何内容的实时网站访问者
- 用于跟踪访问者使用的关键字的Java脚本,该脚本将引导到我的网站
- 向网站访问者显示一次性欢迎信息的最佳方式是什么
- 我如何找到网站访问者的位置(仅城市)使用javascript或PHP
- 获得网站访问者位置的最佳方法是什么?
- 如何知道访问者拒绝与网站分享他们的位置
- 我如何检测访问者的国家并将他/她重定向到特定的网站?
- 网站上的访问者cookie,以便在网站上的谷歌分析数据中细分用户类型
- 我如何以相同的概率随机向访问者显示我的网站的不同版本
- 如何使用JavaScript计算我网站上的访问者数量?