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


相关推荐

  • 人脸识别算法初次了解

    人脸识别算法初次了解

    2021年11月29日
    39
  • linux抓包命令到文件,Linux下抓包命令tcpdump详解「建议收藏」

    linux抓包命令到文件,Linux下抓包命令tcpdump详解「建议收藏」tcpdump是一个命令行实用程序,可用于捕获和检查进出系统的网络流量。它是网络管理员中用于排除网络问题和安全测试的最常用工具。尽管名称如此,使用tcpdump,您也可以捕获非TCP流量,例如UDP,ARP或ICMP。捕获的数据包可以写入文件或标准输出。tcpdump命令最强大的功能之一是它能够使用过滤器并仅捕获要分析的数据。在本文中,我们将介绍如何在Linux中使用tcpdump命令的基础…

    2022年8月20日
    13
  • Java多线程常用面试题

    Java多线程常用面试题一、什么是多线程?线程是指程序在运行的过程中,能够执行程序代码的一个执行单元。Java语言中,线程有五种状态:新建、就绪、运行、阻塞及死亡。二、线程与进程的区别?进程是指一段正在执行的程序。而线程有时也被称为轻量级进程,它是程序执行的最小单元,一个进程可以拥有多个线程,各个线程之间共享程序的内存空间(代码段、数据段、堆空间)及一些…

    2022年5月22日
    35
  • Vue生命周期(11个钩子函数)「建议收藏」

    Vue生命周期生命周期初识生命周期详解(八个钩子函数)生命周期生命周期:Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;生命周期钩子函数生命周期钩子函数,让够让咱们…

    2022年4月6日
    145
  • resnet18 pytorch_如何搭建服务器

    resnet18 pytorch_如何搭建服务器参照ResNet50的搭建,由于50层以上几乎相同,叠加卷积单元数即可,所以没有写注释。101和152的搭建注释可以参照我的ResNet50搭建中的注释:训练可以参照我的ResNet18搭建中的训练部分:ResNet101和152可以依旧参照ResNet50的网络图片:上代码:ResNet101的model.py模型:importtorchimporttorch.nnasnnfromtorch.nnimportfunctionalasFclassDownSampl

    2022年10月6日
    2
  • Ubuntu18.04美化_乌班图美化

    Ubuntu18.04美化_乌班图美化和网上的美化一样,但是我当初跟着博客美化的时候遇到一些问题,按博客的做法无法解决。所以我自己也写一篇关于ubuntu18.04美化主题的博客。第一步:安装主题工具:GNOMETweakssudoapt-getupdatesudoapt-getinstallgnome-tweak-tool然后安装完成后我们打开Tweaks(截图如下):第二步,修改窗口按钮位…

    2022年9月24日
    3

发表回复

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

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