用定时器实现页面跳转

最新推荐文章于 2023-03-27 00:56:02 发布

南极小浣熊

最新推荐文章于 2023-03-27 00:56:02 发布

阅读量1.5k

点赞数

分类专栏：前端哦

本文链接：https://blog.csdn.net/weixin_43970848/article/details/101383074

版权

前端哦专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先呢，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>

感谢大家的观看~