【JS重点知识03】定时器—间歇函数

一:间歇函数的应用场景

网页倒计时是需要每个一段时间需自动执行一段代码,而不需要手动去触发;间歇函数刚好满足了这一要求;

二:间歇函数的使用

1 开启定时器

语法规范:

1 setInterval(匿名函数,时间)
2 
(1)外部书写一个具名函数
(2)setInterval(函数名,时间)
  • 时间单位为ms
  • 每间隔设置的时间后执行相应函数
  • 不同的定时器会返回一个id数字,用于标识不同的定时器

2 关闭定时器

语法规范:

let 变量名 = setInterval(匿名函数,时间间隔)
clearInterval(变量名)

三:用户倒计时案例:

需求:一个按钮60秒后才可以使用,阅读协议按钮制作

<body>
  <button disabled>我已阅读协议(5)</button>
  <script>
    const btn = document.querySelector('button')
    let i = 5
    let timer = setInterval(function () {
      i--
      // button按钮比较特殊,要使用innerHTML获取btton中的值
      btn.innerHTML = `我已经阅读协议(${i})`
      if (i === 0) {
        btn.innerHTML = '我已阅读用户协议'
        clearInterval(timer)
        btn.disabled = false
      }
    }, 1000)
  </script>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/671709.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 鸿蒙DevEco:导入无法运行提示Sync failed

场景&#xff1a;导入官网下载的案例后导入发现无法运行模拟机&#xff0c;Notifications提示Sync failed... 解决&#xff1a;查看Cause发现是版本问题&#xff0c;通过修改相关内容来解决该问题 1、打开案例地址找到hvigor文件夹 2、打开hvigor-config.json5&#xff0c;将&…

【计算机毕设】SpringBoot校园资料分享平台的设计与实现 - 源码免费(私信领取)

免费领取源码 &#xff5c; 项目完整可运行 &#xff5c; v&#xff1a;chengn7890 诚招源码校园代理&#xff01; 1. 研究目的 本项目旨在设计并实现一个基于SpringBoot的校园资料分享平台&#xff0c;以满足学生在学习过程中对资料分享和获取的需求。具体目标包括&#xff1a…

YOLOv5改进(五)-- 轻量化模型MobileNetv3

文章目录 1、MobileNetV3论文2、代码实现2.1、MobileNetV3-small2.2、MobileNetV3-large 3、运行效果4、目标检测系列文章 1、MobileNetV3论文 Searching for MobileNetV3论文 MobileNetV3代码 MobileNetV3 是 Google 提出的一种轻量级神经网络结构&#xff0c;旨在在移动设备上…

《内网渗透实战攻略》读书笔记

一、书籍介绍 本书将分为三大部分&#xff0c;首先介绍内网渗透技术中涉及到的各类基础概念&#xff0c;并介绍攻击者视角中的入侵生命周期流程。其次进行环境搭建准备&#xff0c;并介绍各类常用工具的使用。z后通过9套内网环境的高强度实战训练&#xff0c;系统性的介绍和实践…

LeetCode-93. 复原 IP 地址【字符串 回溯】

LeetCode-93. 复原 IP 地址【字符串 回溯】 题目描述&#xff1a;解题思路一&#xff1a;回溯背诵版解题思路三&#xff1a;0 题目描述&#xff1a; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xf…

PlantUML-使用文本来画时序图

介绍 PlantUML 是一个开源工具&#xff0c;用户可以使用纯文本描述来创建 UML (统一建模语言) 图形。由于它使用文本来描述图形&#xff0c;因此可以很容易地将这些描述与源代码一起存储在版本控制系统中。然后&#xff0c;PlantUML 负责将这些描述转换为图形。 资料 官方文…

阿里云短信服务使用(Java)

文章目录 一、流程1.打开短信服务2.提交材料申请资质3.资质通过后&#xff0c;申请短信签名并设置短信模板4.右上角设置AccessKey5.充值 二、参考官方文档调用API1.引入maven依赖2.调用API补充 一、流程 1.打开短信服务 登陆注册阿里云 搜索“短信服务”&#xff0c;点击“免…

C语言操作符详解(二)

统计整数在二进制中1的个数&#xff1a; 这是上一篇文章留下的问题&#xff0c;这里为大家作答&#xff1a; //统计二进制中1的个数 int statistics(int a) {int count 0;for (int i 0; i < 32; i){if (a & 1){count;}a a >> 1;}//while (a)//{// a a &…

React(五)UseEffect、UseRef

(一)useEffect useEffect – React 中文文档 useEffect hook用于模拟以前的class组件的生命周期&#xff0c;但比原本的生命周期有着更强大的功能 1.类组件的生命周期 在类组件编程时&#xff0c;网络请求&#xff0c;订阅等操作都是在生命周期中完成 import React, { Co…

网安速成之选择题(详细解析版)

网安速成之选择题 单选多选 单选 密码学的目的是&#xff08; C &#xff09;。 A. 研究数据压缩 B. 研究数据解密 C. 研究数据保密 D. 研究漏洞扫描 密码学的目的是研究数据加密&#xff0c;保证数据的机密性 数据机密性安全服务的基础是&#xff08; D &#xff09;。 A. 数…

11.2 选择排序

目录 11.2 选择排序 11.2.1 算法特性 11.2 选择排序 选择排序&#xff08;selection sort&#xff09;的工作原理非常简单&#xff1a;开启一个循环&#xff0c;每轮从未排序区间选择最小的元素&#xff0c;将其放到已排序区间的末尾。 设数组的长度为 &#x1d45b;…

杂牌记录仪TS视频流恢复方法

大多数的记录仪都采用了MP4/MOV文件方案&#xff0c;极少数的可能在用AVI文件&#xff0c;极极少数的在用TS文件方案。很多人可能不太解TS文件&#xff0c;这是一种古老的视频文件结构&#xff0c;下边这个案例我们来看下TS视频文件的恢复方法。 故障存储:8G存储卡/fat32文件系…

pdb文件名称被修改导致pdb文件加载失败的实战排查案例分享

目录 1、概述 2、问题说明 3、pdb文件加载失败的可能原因有哪些&#xff1f; 4、使用!sym noisy打开pdb加载详情&#xff0c;发现pdb文件名称确实被修改了 5、Windbg是如何知道要加载pdb文件名称的&#xff1f; C软件异常排查从入门到精通系列教程&#xff08;专栏文章列表…

五类数据容器对比总结 知道喔!

五类数据容器对比总结 1.五类数据容器的区别 是否支持下标索引 支持&#xff1a;列表、元组、字符串---序列类型 不支持&#xff1a;集合、字典---非序列类型 是否支持重复元素 支持&#xff1a;列表、元组、字符串---序列类型 不支持&#xff1a;集合、字典---非序列类型 是…

Ray Tracing in one Weekend But on CUDA

Ray Tracing in one Weekend But on CUDA 环境说明项目代码项目内容思路实现方法效果 环境说明 代码运行在Visual Studio 2019环境&#xff0c;显卡为NVIDIA GeForce GTX 1650&#xff0c;CUDA版本为11.6&#xff0c;cuDNN版本为8.4.0。具体配置方式见CUDA C/C 从入门到入土 第…

所有人都可以做的副业兼职,短剧推广,1天挣几百,附详细方法!

自从上次向大家介绍了短剧掘金项目以来&#xff0c;便陆续收到了众多朋友的询问&#xff1a;现在是否还能加入短剧掘金的大军&#xff1f;答案是肯定的。目前&#xff0c;无论是各大视频平台还是其他渠道&#xff0c;短剧掘金项目都呈现出蓬勃发展的态势。而且&#xff0c;相关…

Seq2Seq模型:详述其发展历程、深远影响与结构深度剖析

Seq2Seq&#xff08;Sequence-to-Sequence&#xff09;模型是一种深度学习架构&#xff0c;专为处理从一个输入序列到一个输出序列的映射任务设计。这种模型最初应用于机器翻译任务&#xff0c;但因其灵活性和有效性&#xff0c;现已被广泛应用于自然语言处理&#xff08;NLP&a…

PageHelper多数据源无法自动切换数据源问题解决

在使用PageHelper进行分页处理的过程中&#xff0c;通过配置autoRuntimeDialect: true发现&#xff0c;在执行MySQL分页处理后&#xff0c;继续执行SqlServer的分页&#xff0c;使用的仍然是MySQL的语法&#xff0c;PageHelper并没有进行自动切换数据源处理。 在查看源码的时候…

Kaggle线上零售 CRM分析(RFM+BG-NBD+生存分析+PySpark)

数据集地址&#xff1a;数据集地址 我的NoteBook地址&#xff1a;NoteBook地址 这个此在线零售数据集包含2009年12月1日至2011年12月9日期间的在线零售的所有交易。该公司主要销售独特的各种场合礼品。这家公司的许多客户都是批发商。本文将通过pyspark对数据进行导入与预处理&…

TVS管的功率计算与选型

“选择多大功率的TVS管才算合适&#xff1f;”。关于TVS功率的选择&#xff0c;不晓得之前你考虑过没。反正我这边是感觉网上关于TVS管参数、选型等文章比较多&#xff0c;但关于TVS管功率计算及功率选型的文章比较少。但往往在这些点上更能体现面试者的功力。 研究过TVS规格书…