首页 > 其他分享> > JS实现页面稍后跳转（location.href）

JS实现页面稍后跳转（location.href）

2021-04-15 11:34:06 作者：互联网

JS实现简单的自动跳转页面

描述：

在5秒后自动跳转到指定页面

效果如下：

思路：

定义一个方法，获取span标签，修改span标签体内容，时间--
定义一个定时器，1秒执行一次该方法 3.在方法中判断时间如果<= 0 ，则跳转到首页

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转页面</title>

    <style>
        p {
            text-align: center;
        }

        #time {
            color: #096;
        }
    </style>

    <script>
        var second = 5;
        function showTime() {
            second --;
            if(second >= 0) {
                // 获取spen标签对象
                var elementById = document.getElementById("time");
                // 修改span标签体内容
                elementById.innerHTML = second;
            } else {
                location.href = "https://www.baidu.com/";
            }
        }

        // 每隔 1 秒执行一次showTime方法
        setInterval(showTime, 1000);
    </script>
</head>
<body>

<p align="center">
    <spen id="time">5</spen>秒之后自动跳转页面 ...
</p>

</body>
</html>

标签：span,showTime,标签,JS,second,href,跳转,页面
来源： https://www.cnblogs.com/yshusen/p/14661723.html