BOM自动跳转首页

最新推荐文章于 2022-05-18 21:11:50 发布

稻田里展望者

最新推荐文章于 2022-05-18 21:11:50 发布

阅读量246

点赞数

分类专栏： Web前端技术文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_46441425/article/details/123143990

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

1.页面显示效果

2.倒计时读秒效果:用定时器
定义一个方法,获取span标签,修改span标签体的内容: 时间–
定义一个定时器, 1秒执行一次该方法

3.在方法中判断时间<=0, 则跳转到首页

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BOM跳转首页</title>
    <style>
        p {
            text-align: center;
        }

        span {
            color: red;
        }
    </style>

</head>

<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转到首页...
    </p>

    <script>
        var second = 5;

        //倒计时读秒效果实现
        function showTime() {
            second--;
            //second<=0, 则跳转到首页
            if (second == 0) {
                //跳转到首页
                location.href = "https://www.baidu.com"
            }
            var time = document.getElementById("time");
            //控制属性名
            time.innerHTML = second + "";//加个字符串变成数字字符串类型
        }

        //设置定时器: 1秒执行该方法
        setInterval(showTime, 1000);

    </script>

</body>

</html>