JavaScript案例：页面自动跳转到首页

最新推荐文章于 2022-08-03 23:01:15 发布

爱人io

最新推荐文章于 2022-08-03 23:01:15 发布

阅读量1k

点赞数

分类专栏： Java笔记文章标签： javascript html css java python

本文链接：https://blog.csdn.net/qq_43083688/article/details/106037861

版权

Java笔记专栏收录该内容

40 篇文章 1 订阅

订阅专栏

案例3：页面自动跳转到首页


 <!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>
        /*
        分析：
            1.显示页面的效果<p>
            2.倒计时读秒效果实现
                2.1定义一个方法，获取span标签，修改标签体内容，时间--
                2.2定义一个定时器，1秒执行一次该方法
            3.在方法中判断时间如果<=0，则跳转到首页
         */
        //2.倒计时读秒效果实现
        var second = 5;
        var time = document.getElementById("time");

        //2.1定义一个方法，获取span标签，修改标签体内容，时间--
        function showTime() {
            second--;
            if(second <= 0) {
                location.href = "http://www.baidu.com";
            }else{
                time.innerHTML = second + "";
            }

        }
        //设置定时器一秒执行一次该方法
        setInterval(showTime,1000);
    </script>
</body>
</html>

爱人io

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例：页面自动跳转到首页

案例3：页面自动跳转到首页 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自动跳转</title> <style> p{ text-align: center; } span{ color: red;
复制链接

扫一扫

专栏目录