原创
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.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>
JavaScript
JavaScript案例
赞
- 作者：Melonico
- 发表时间：2021-03-15 17:38
- 更新时间：2021-03-15 17:38
评论