js 自动读秒跳转几种方式

本文通过两个实例详细介绍了JavaScript中setTimeout和setInterval的区别及使用方法。第一个实例使用setInterval实现网页自动跳转并倒计时显示,第二个实例则采用setTimeout完成相同功能。通过对这两种定时器的对比,帮助读者理解其工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!--setTimeout和setInterval区别:setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。-->

/*第一种 用setInterval()*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script language="javascript" type="text/javascript">
var i = 4;      /*这里不写5,写成4,是为了读秒视觉效果*/
var res;
res = setInterval("jump()", 1000);
function jump()
{
if(i == 0){
window.location.href = 'www.baidu.com';
clearInterval(res);
}
document.getElementById("mes").innerHTML = i;
i--;
}
</script>
</head>
<body>
<div>
<p>将在<span id="mes" style="color: red; font-weight: bold">5</span>秒后跳转...</p>
</div>
</body>
</html>




/*第二种 用setTimeout()*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js读秒跳转setTimeout</title>
<meta http-equiv="refresh" content="5;url=www.baidu.com">
<script language="javascript" type="text/javascript">
var i = 5;
var res;
function jump()
{
document.getElementById("mes").innerHTML = "<font color='red'>" + i + "</font>";
i -= 1;
res = setTimeout("jump()", 1000);
if(i <= 0){
clearTimeout(res);
}
}
window.onload = jump;
</script>
</head>
<body>
<div>
页面将在<span id="mes">5</span>秒后跳转...
</div>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值