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


相关推荐

  • django框架菜鸟教程_django框架菜鸟教程

    django框架菜鸟教程_django框架菜鸟教程Django一、介绍1、简介是用python语言写的开源web开发框架,并遵循MVC设计。Django的主要目的是简便、快速的开发数据库驱动的网站。2、特点1)重量级框架2)MVT模式MVC其核心思想是分工、解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容。M全拼为Model,主要封装对数据库层的访问,对数据库中的数据进行增、删、改、查操作。…

  • android WebView总结

    android WebView总结

    2021年12月17日
  • Centos7配置MySQL读写分离[通俗易懂]

    Centos7配置MySQL读写分离[通俗易懂]背景82和83两台Mysql已经实现了主从复制。即将使用mysql-proxy进行读写分离,配置192为proxy,写82读83。mysql-proxymysql-proxy是一个处于客户端和服务器之间的中间件,它可以检测,分析或改变它们的通信。简单说就是一个中间层代理,一个连接池,负责将前台应用的连接请求转发给后台的数据库,并且通过lua脚本,可以实现复杂的连接控制和过滤,从而实现读写分离和负载…

  • 图解Windows Server服务器上DNS服务器配置

    图解Windows Server服务器上DNS服务器配置图解WindowsServer服务器上DNS服务器配置听语音  | 浏览:1385 | 更新:2018-04-0319:58 1 2 3 4 5 6 7 分步阅读本篇经验将和大家介绍WindowsServer服务器上DNS服务器配置的步骤,希望对大家的工作和学习有所帮助!DNS服务器安装 1…

  • iterator迭代器详解_c++迭代器iterator

    iterator迭代器详解_c++迭代器iterator迭代器 Iterator动机模式定义实例结构要点总结笔记动机在软件构建过程中,集合对象内部结构常常变化各异.但对于这些集合对象.我们希望在不暴露其内部结构地同时.可以让外部客户代码透明地访问其中包含地元素;同时这种”透明遍历”也为”同一种算法在多种集合对象上进行操作”提供了可能.使用面向对象技术将这种便利机制抽象为”迭代对象”为”应对变化中地集合对象”提供了一种优雅地方式模式定义提供了一种方法顺序访问一个聚合对象中地各个元素,而又不暴露(稳定)该对象地内部表示.实例结构要点总结迭代抽象

  • linux添加路由网关_linux删除默认网关

    linux添加路由网关_linux删除默认网关1、以前经常使用route命令添加和删除路由添加网关/设置网关:routeadd-net192.100.10.0netmask255.255.255.0deveth0#增加一条到达192.100.10.0的路由。屏蔽一条路由:routeadd-net192.100.10.0netmask255.255.255.0reject#增加一…

发表回复

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

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