JavaScript——简单页面跳转示例

最新推荐文章于 2024-01-04 10:47:59 发布

有空再写

最新推荐文章于 2024-01-04 10:47:59 发布

阅读量239

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_43305674/article/details/108908732

版权

主要使用JavaScript中的document.getElementById(),setInterval()和location.href方法，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
    <script>
        /*
        分析：
        1、显示页面效果<p>
        2、倒计时5秒效果实现
            2.1定义一个方法，获取span标签，修改span标签体内容
            2.2定义一个定时器，1秒执行一次该方法
        3、在方法汇总判断时间，如果<=0，则跳转到
         */
        //倒计时5秒效果实现
        var second = 5;
        function ShowTime() {
            second--;
            //判断时间<=0，则跳转到首页
            if(second<=0){
                location.href = "https://www.baidu.com/";
            }

            var time = document.getElementById("time");
            time.innerHTML = second+" ";
        }
        //设置定时器，1秒执行一次
        setInterval(ShowTime,1000);
    </script>
</head>
<body>
    <p>
         <span id="time">5</span>秒之后，自动跳转到首页
    </p>
</body>
</html>

实现效果如下所示：

跳转后：

有空再写

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——简单页面跳转示例

主要使用JavaScript中的document.getElementById(),setInterval()和location.href方法，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跳转</title> <style> p{ text-ali
复制链接

扫一扫