用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)


相关推荐

  • qq浏览器手动屏蔽广告_qq好友屏蔽你的特征

    qq浏览器手动屏蔽广告_qq好友屏蔽你的特征现在很多软件的免费版都是有广告的,这让原本清清爽爽的界面变得乱七八糟,QQ虽然没有收费版,但是也要开了会员才能去广告。那不开会员如何屏蔽QQ广告呢?早在QQ2009Beta版的时候,可以通过删除一些文件让非会员也能实现去广告的目的,可惜从QQ2009正式版起增加了文件完整性检查,删除文件会导致QQ无法启动,并且要求重新安装。这里要介绍的方法,其实只要你对Windows操

  • MYSQL EXPLAIN结果详解

    MYSQL EXPLAIN结果详解EXPLAIN不会告诉你关于触发器、存储过程的信息或用户自定义函数对查询的影响情况。EXPLAIN不考虑各种Cache(缓存)。EXPLAIN不能显示MySQL在执行查询时所作的优化工作。部分统计信息是估算的,并非精确值。 EXPALIN只能解释SELECT操作,其他操作要重写为SELECT后查看执行计划。1idselect的识别符,这是select的查询序列号。如果有两列数据id相同,则为同一组查询,由上到下执行。如果id值不同,id值越大,优先级越高。2select_type

  • nginx配置ssl证书实现https访问_ssl证书有效期

    nginx配置ssl证书实现https访问_ssl证书有效期1,登录阿里云,工作台找SSL证书或者安全下找CA证书2,点击创建证书(或购买证书),创建好以后点击证书申请、3,设置配置以及域名信息,仅填写圈住内容,其他默认即可4,随后等待一会,查看状态,是否为 已签发5,为已签发时,点击下载选择下载类型6,下载后解压文件7,上传至服务器,存放位置,先找到nginx所在位置 “/nginx/conf/”找到该位置创建“cert”把刚才解压的两个文件存放至此。8,开始nginx配置内容`server { #SSL 访问端口号为 443 li

  • K12个性化在线阅读平台“少年头条”完成400万天使轮融资

    K12个性化在线阅读平台“少年头条”完成400万天使轮融资K12个性化在线阅读平台“少年头条”完成400万天使轮融资

  • 主流大数据存储解决方案评析

    主流大数据存储解决方案评析EMC Isilon:横向扩展 性能突出大数据存储不是一类单独的产品,它有很多实现方式。EMC Isilon存储事业部总经理杨兰江概括说,大数据存储应该具有以下一些特性:海量数据存储能力,可轻松管理PB级乃至数十PB的存储容量;具有全局命名空间,所有应用可以看到统一的文件系统视图;支持标准接口,应用无需修改可直接运行,并提供API接口进行面向对象的管理;读写性能优异,聚合带宽高达数GB乃至数十GB…

  • zookeeper入门教程_入门教程

    zookeeper入门教程_入门教程zookeeperwatcher架构zookeeper 配置中心分布式ID分布式锁集群搭建数据一致性协议:zab协议Zookeeper Leader选举Observer角色及其配置watcher架构客户端首先将Watcher注册到服务器,同时将Watch对象保存到客户端的Watch管理器中。当Zookeeper服务器监听到的数据发生变化时,服务器会通知客户端,接着客户端的Watch管理器会触发相关的Watcher来回调响应处理逻辑,从而完成整体的数据发布/订阅流程。javaAPIJava

发表回复

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

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