首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >用settimeout如何实现倒计时_javascript一分钟倒计时代码

用settimeout如何实现倒计时_javascript一分钟倒计时代码

作者头像
全栈程序员站长
发布2022-11-09 11:34:46
发布2022-11-09 11:34:46
1.8K0
举报

大家好,又见面了,我是你们的朋友全栈君。

setTimeout实现
代码语言:javascript
复制
<!-- 8秒倒计时 -->
<p><span id="time"></span>秒后自动跳转到百度</p>
<!-- js部分 -->
function countDown(secs, url) { 
 // secs--设置倒计时秒数,url--要跳转的链接
var time = document.getElementById("time")
time.innerHTML = secs // 页面上显示所设定的倒计时时长
if(--secs>0){ 

setTimeout(countDown, 1000, secs, surl)  // 剩余秒数>0继续每秒执行一次
// setTimeout("count(" + secs + ",'" + surl + "')", 1000) 这样的写法也可以,但该语法不推荐,有安全风险
} else { 

location.href = surl  // 剩余秒数=0,页面调向指定url
}
}
counDown(8, "www.baidu.com")
setTimeInterval实现
代码语言:javascript
复制
<p><span id="time"></span>秒后自动跳转到百度</p>
<!-- js部分 -->
var secs = 8 // 初始化倒计时时长8s
var time = document.getElementById("time")
time.innerHTML = secs // 给页面倒计时处初始化赋值,这样就不用在标签处手动写上8了
var interval = setInterval(countDown, 1000, "www.baidu.com")  // 设定一个时间循环,1s执行一次countDown函数
function countDown(surl) { 

if(--secs<0) { 
  //剩余时间为0的时候清除时间循环,跳转去www.baidu.com
clearInterval(interval)
location.href = surl
}
time.innerHTML = secs
}

注:setTimeout执行完可以不用执行clearTimeout,这个clearTimeout效果类似于微信撤回功能,假如setTimeout设置2分钟后自动跳转www.baidu.com,但用户在2分钟内突然不想让页面跳去baidu,执行clearTimeout就能取消这个定时操作了,但是如果2分钟都过了,显然定时器已经失效了。但是如果不执行clearInterval,setInterval就不会停止

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/185872.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月4日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • setTimeout实现
  • setTimeInterval实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档