用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • CSS在IE6、7、8中的差别

    CSS在IE6、7、8中的差别

    2021年6月20日
    139
  • Landsat-8 介绍[通俗易懂]

    Landsat-8 介绍[通俗易懂]Landsat-8于2013年2月11日发射升空,目前仍在运行。它始于Landsat数据连续性任务。现在,我们将其简称为Landsat-8。Landsat-8在与太阳同步的近极轨道上绕地球旋转,高度为705公里(438英里),倾斜角为98.2度,每99分钟完成一次地球轨道。卫星的重复周期为16天,赤道穿越时间为:上午10:00+/-15分钟。Landsat-8每天收集550个场景。因此,到2020年8月,它将收集到总计150万个场景。这颗主力卫星仍然是面向公众的开源土地信息的主要内容。…

    2022年7月23日
    21
  • 【备忘录】麦克斯韦速率分布

    【备忘录】麦克斯韦速率分布突然想做麦克斯韦速度分布的复习,找到了以前读《新概念物理学·热学》的笔记发现高中时我如何臆测不得其解的东西竟然被这一页提纲挈领的笔记就解释很清楚了如果让我给高中时的我带话帮助他迅速理解这

    2022年7月4日
    23
  • office2013产品密钥_office365激活密钥

    office2013产品密钥_office365激活密钥HV7BJ-R6GCT-VHBXD-YH4FD-GTH2T87XPX-M3D6G-W4D39-VKVKR-DB8C7HM7R6-FP6QB-XTDC3-MT442-FVPKMXJBYM-62WK4-RCT9Y-XG3HQ-M2CMKHMYY4-TR62Q-9TT76-BDBHK-WPRPTHV7BJ-R6GCT-VHBXD-YH4FD-GTH2Thttp://zhida…

    2022年10月9日
    2
  • pycharm不显示结果_pycharm界面

    pycharm不显示结果_pycharm界面网上说是什么包问题的就说了。我遇到一个非常奇葩的问题因为你的设置可能是这样每次都在窗口右侧的工具栏那边显示。可能突然心情不佳就不显示了。然后你再把勾去掉即可。你要喜欢再点上也行。转载于:https://www.cnblogs.com/theWinter/p/8320343.html…

    2022年8月25日
    7
  • Linux上端口开放常用命令[通俗易懂]

    Linux上端口开放常用命令[通俗易懂]场景系统部署在linux服务器后常需要开发指定的端口。在linux怎样对端口进行操作。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现#查看想开的端口是否已开:firewall-cmd–query-port=8888/tcp#添加指定需要开放的端口:firewall-cmd–add-port=8888/tcp–permanent#重载入添加的端口:

    2025年8月30日
    5

发表回复

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

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