用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就不会停止

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 操作系统的功能

    操作系统的功能

    2021年11月29日
  • 【ZigBee协议栈简介】

    【ZigBee协议栈简介】1、Zigbee协议栈简介  协议是一系列的通信标准,通信双方需要按照这一标准进行正常的数据发射和接收。协议栈是协议的具体实现形式,通俗讲协议栈就是协议和用户之间的一个接口,开发人员通过使用协议栈来使用这个协议,进而实现无线数据收发。  如图1所示:Zigbee协议分为两部分,IEEE802.15.4定义了PHY(物理层)和MAC(介质访问层)技术规范;Zigbee联盟定义了NWK(网络…

  • gitlab cicd配置

    gitlab cicd配置简介以前代码更新之后,我们需要手动将代码拉到测试服务器上,运行验收通过之后,再在生产环境重新弄一遍,一两个服务还算轻松,如果涉及到的服务很多的话,每一个服务都需要这样来几遍,这是一个很头疼了,为了解决这个问题,我们引入了比较简单易懂的自动化部署工具,这也是gitlab自带的CI工具gitlab-runner,该工具解决了多环境多服务手动部署繁琐问题,用自动化脚本代替人工部署,我们不需要手…

  • 演示:基于EIGRP的非等价负载平衡 (基本配置篇)

    演示:基于EIGRP的非等价负载平衡 (基本配置篇)

  • 批处理For–分割字符串「建议收藏」

    批处理For–分割字符串「建议收藏」批处理命令For——分割字符串windows下批处理命令分割字符串代码@echooffsetstr=”aa_bb_cc”:GOONfor/f”delims=_,tokens=1,*”%%iin(%str%)do(echo%%i%%jsetstr=”%%j”gotoGOON)输出结果aabb_ccbbcccc

    2022年10月12日
  • 个人博客网站搭建[通俗易懂]

    个人博客网站搭建[通俗易懂]个人博客网站搭建VuePress介绍本人的个人博客网站,网站地址,是基于VuePress进行搭建。什么是VuePress根据官网:VuePress由两部分组成:第一部分是一个极简静态网站生成

发表回复

您的电子邮箱地址不会被公开。

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