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

用settimeout如何实现倒计时_javascript一分钟倒计时代码<!–8秒倒计时–><p><spanid=”time”></span>秒后自动跳转到老版本</p><!–js部分–>functioncountDown(secs,url){//secs–设置倒计时秒数,url–要跳转的链接 vartime=document.getElementById(“time”) time.innerHTML=secs//页面上显示所设定的倒计时时长 if

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

setTimeout实现
<!-- 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实现
<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.net/185872.html原文链接:https://javaforall.net

(0)
上一篇 2022年10月4日 下午10:36
下一篇 2022年10月4日 下午10:36


相关推荐

  • vue webpak版本 查看_vue升级webpack版本到webpack4

    vue webpak版本 查看_vue升级webpack版本到webpack4用vue来实验下,目的是把webpack3升级至^4.0更新思路是先更新看是否废弃掉了yarnglobaladd@vue/cli-initvueinitwebpackhello_vuecdhello_vuenpmstart需要先验证工程是正确的,可以运行后去看下webpack版本发现是3.6npminstallwebpack@latest-Dnpminstallw…

    2022年8月10日
    12
  • sp_helptext 查看存储过程内容

    sp_helptext 查看存储过程内容

    2021年4月27日
    213
  • Wasserstein距离笔记

    Wasserstein距离笔记Wasserstein 距离 Wasserstein 距离也叫做推土机距离 EarthMover sdistance 这也是由于它的推导过程可以很形象的用挖土填土来解释 这也是因为该距离定义中由一个分布转变为另一个分布所需要的代价和挖土填土的过程十分相似 考虑两个离散的分布 P 和 Q 为了让两个分布相同 我们一个个变量地观察 为了让 P1 和 Q1 相同 我们需要 P1 把手头上的 3 分 2 到 P2 去 这样 P1 和 Q1 都等于 1 此时 P2 4 其他数保持不变 这个过程是不是十分像挖掉 P1 的土填到 P2 上 为了让 P2

    2026年2月12日
    2
  • TimSort算法相关

    TimSort算法相关今天看 Java 的 Collection sort 的源码 发现采用的是 TimSort sort 就在网上查了下 发现一个不错的文章 原链接如下 http www freebuf com vuls 62129 html nbsp nbsp 如何找出 Timsort 算法和玉兔月球车中的 Bug nbsp 0 00 背景形式化方法 FormalMethod 在我们一般人眼中是非常高大上的东西

    2025年6月26日
    5
  • openclaw和其他平台有什么区别 openclaw优势对比分析【对比】

    openclaw和其他平台有什么区别 openclaw优势对比分析【对比】

    2026年3月13日
    2
  • S3C2440时钟配置「建议收藏」

    S3C2440时钟配置「建议收藏」首先来看一下S3C2440的时钟整体框图:CPU工作于FCLKFCLKUPTO400MHZAHB工作于HCLKHCLKUPTO136MHZAPB工作于PCLKPCLKUPTO68MHZ如何得到以上时钟频率(时钟源:12M晶振):通过PLL锁相环可以得到以上3个所需要的时钟S3C2440有两个PLL一个MPLL是提供时钟给CPU用另一个UPLL提…

    2022年5月15日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号