用定时器实现页面跳转

74 阅读 0 评论 49 点赞

我是靠谱客的博主伶俐咖啡，最近开发中收集的这篇文章主要介绍用定时器实现页面跳转，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先呢，BOM中与定时器有关的方式的函数有

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

-参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器**

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

要实现页面的跳转，要用到的是setInterval()函数，一秒钟执行一次，实现倒计时，当倒计时结束后，利用地址栏对象Location的href属性跳转到指定页面（例如跳转到百度）

代码分析：

1.显示页面效果
2.倒计时读秒效果实现

2.1 定义一个方法，获取span标签，修改span标签体内容，时间减减
2.2 定义一个定时器，1秒执行一次该方法

3.在方法中判断时间如果<= 0 ，则跳转到百度

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color:red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
// 倒计时读秒效果实现
var second = 5;
var time = document.getElementById("time");
//定义一个方法，获取span标签，修改span标签体内容，时间--
function showTime(){
second -- ;
//判断时间如果<= 0 ，则跳转到首页
if(second <= 0){
//跳转到百度
location.href = "https://www.baidu.com";
}
time.innerHTML = second +"";
}
//设置定时器，1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>

感谢大家的观看~