前端小案例：自动跳转页面

持久的棒棒君

于 2022-04-27 17:56:12 发布

阅读量916

点赞数

分类专栏：大杂烩文章标签：前端 js bom

本文链接：https://blog.csdn.net/lalala_dxf/article/details/124456884

版权

大杂烩专栏收录该内容

259 篇文章 2 订阅

订阅专栏

先看效果
请添加图片描述

具体实现步骤
1、显示页面效果
2、实现倒计时读秒效果
2.1 定义一个方法，获取span标签，修改span标签体内容
2.2 定义一个定时器，一秒执行以此该方法

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-align: center;
        }

        #time{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后自动跳转到首页...
    </p>

    <script>
        var time = document.getElementById("time");
        var count = 5;
        function shift(){
            count--;
            if(count<=0){
                location.href = ("https://www.baidu.com");
            }
            time.innerHTML = count+"";
        }
        var id = setInterval(shift,1000);
    </script>
</body>
</html>

持久的棒棒君

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端小案例：自动跳转页面

先看效果具体实现步骤1、显示页面效果2、实现倒计时读秒效果2.1 定义一个方法，获取span标签，修改span标签体内容2.2 定义一个定时器，一秒执行以此该方法具体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
复制链接

扫一扫