JavaScript——定时跳转页面

最新推荐文章于 2023-10-20 11:00:35 发布

Melonico

最新推荐文章于 2023-10-20 11:00:35 发布

阅读量857

点赞数 2

分类专栏： JavaScript JavaScript小案例文章标签： javascript

本文链接：https://blog.csdn.net/qq_45852430/article/details/106953964

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

JavaScript小案例

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述
1. 在html中显示内容

<p>
	<span id="time">5</span>秒后跳转页面...
</p>

2. 获取 span 对象并设置一个秒数计数器

var time = document.getElementById("time");
var second = 5;

3. 定义秒数显示方法，每次执行该方法second自减

function showTime() {
	second--;
	time.innerHTML = second.toString();
}

4. 当秒数小于等于0时，应跳转页面，在showTime方法中添加判断

function showTime() {
	second--;
	if (second <= 0){
		location.href = "https://www.baidu.com";
	}
	time.innerHTML = second.toString();
}

5. 创建计数器，每1秒执行showTime方法

setInterval(showTime,1000);

6. 添加样式，优化显示效果

p{
	text-align: center;
}
span{
	color: red;
}

完整代码

<!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>
    // 获取span对象
    var time = document.getElementById("time");
    // 设置秒数
    var second = 5;
    // 定义秒数显示方式
    function showTime() {
        // 执行1次秒数自减
        second--;
        // 判断，如果秒数小于0则跳转页面
        if (second <= 0){
            // 设置href
            location.href = "https://www.baidu.com";
        }
        // 更改span标签的显示内容
        time.innerHTML = second.toString();
    }
    // 定义定时器，每隔1秒执行一次showTime方法
    setInterval(showTime,1000);
</script>
</body>
</html>

Melonico

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——定时跳转页面

1. 在html中显示内容<p> <span id="time">5</span>秒后跳转页面...</p>2. 获取 span 对象并设置一个秒数计数器var time = document.getElementById("time");var second = 5;3. 定义秒数显示方法，每次执行该方法second自减function showTime() { second--; time.innerHTML = second.t.
复制链接

扫一扫

专栏目录