程序开发 > Javascript > 正文js倒计时跳转（已封装成对象）
javascript 实现倒计时跳转到指定页，由于应该定义为方法参数的变量（如“几秒”后跳转）必须定义为全局变量，而无法把它们写到一个方法内，导致调用很不方便，经常要改动的值不能用参数传递，得改代码中的初始值；对于不理解代码的人，修改就可能出错，使用起来很不方便。所以，很有必要把它封装成一个对象，把所有变量和方法都定义在这个对象中，经常要改动的值可定义为对象中方法的参数，这样就可以避免修改代码，把要改动值传递给对象的方法即可。
一、实现过程：
1、首先定义一个对象 jump，然后定义4个变量，所代表的含意，代码中都有注释；其次定义一个初始化方法（init）和一个显示跳转提示信息的方法（show）。
2、init 方法负责把传递进来的值赋给对象的变量并创建一个计时器（setInterval），该计时器指定每秒钟执行一次 show 方法。
3、show 方法首先获取显示跳转提示信息的对象（div 标签 id=showId）,然后把剩余跳转时间、提示文字和跳转网址赋给该对象的 innerHTML 属性；接着判断剩余跳转时间是否等于0，如果等于0，则清除计时器，并跳转到指定页；最后是跳转时间减1（jump.s--）。
二、实现代码如下：
<html>
<head>
<title>js倒计时跳转</title>
<script language="javascript" type="text/javascript">
var jump = {
o: null,//显示提示跳转信息的对象（如例中的show)
s: 0,//跳转时间（单位：秒）
url: "",//跳转网址
intervalId: null,//计时对象
init: function (obj, time, url) {
jump.o = obj;
jump.s = time;
jump.url = url;
jump.intervalId = setInterval("jump.show()", 1000);
},
show: function () {
document.getElementById(jump.o).innerHTML = "将在 " + jump.s + " 秒后自动跳转到 " + jump.url;
if (jump.s == 0) {
clearInterval(jump.intervalId);
window.location = jump.url;
}
jump.s--;
}
};
jump.init("showId", 5, "http://www.liangshunet.com/");
</script>
</head>
<body>
<div id="showId"></div>
</body>
</html>
调用方法：jump.init("showId", 5, "http://www.xxx.com/");
jump.init(obj, time, url) 参数说明：
obj：显示跳转提示信息的对象（例中的<div id="showId"></div>）；
time：跳转时间（单位：秒）；
url：待跳转到的网址。
三、效率稍高点的实现代码：
跟上面的方法基本是一样的，唯一不同是：只获取一次显示提示跳转信息的对象（在 init 方法中初始化），而上面的方法是每秒钟都获取一次，秒数少效率基本可以忽略。代码如下：
<html>
<head>
<title>js倒计时跳转</title>
<script language="javascript" type="text/javascript">
var jump = {
o: null,//显示提示跳转信息的对象（如例中的show)
s: 0,//跳转时间（单位：秒）
url: "",//跳转网址
intervalId: null,//计时对象
init: function (obj, time, url) {
jump.o = document.getElementById(obj);//与方法一不同之处（1）
jump.s = time;
jump.url = url;
jump.intervalId = setInterval("jump.show()", 1000);
},
show: function () {
jump.o.innerHTML = "将在 " + jump.s + " 秒后自动跳转到 " + jump.url;//与方法一不同之处（2）
if (jump.s == 0) {
clearInterval(jump.intervalId);
window.location = jump.url;
}
jump.s--;
}
};
jump.init("showId", 5, "http://www.xxx.com/");
</script>
</head>
<body>
<div id="showId"></div>
</body>
</html>
注意问题：调用代码必须放在显示提示跳转信息对象（如例中的<div id="showId"></div>）的后面，否则初始化时找不到对象。