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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java版电商平台B2B2C:多商家直播商城系统特性解析

B2B2C平台&#xff0c;立足于传统电商领域&#xff0c;同时引入了创新的商业模式。该平台不仅支持商家入驻和平台自营&#xff0c;还积极构建了一个全新的市场环境&#xff0c;旨在为各行各业及互联网创业者提供更多收益机会。 该平台以消费者需求为中心&#xff0c;帮助企业构…

PyQt5+SQLlite3基于邮箱验证的登陆注册找回系统

本期教程投稿一篇实用性的基于邮箱登陆注册找回于一体的系统&#xff0c;在日常的开发和软件应用中非常常见&#xff0c;并且也使用了逻辑与界面分离的写法&#xff0c;那这个文章将详细的为大家介绍整个流程&#xff0c;但是细节的话还需要大家自己去完善&#xff0c;也欢迎大…

人工智能的兴起和发展

人工智能的兴起 人工智能&#xff0c;artificial intelligence&#xff0c;缩写为AI。 它是随着计算机技术的发展才逐步产生并发展起来的一门学科。关于AI的定义有很多种&#xff0c;通俗一点说&#xff0c;它企图了解智能的实质&#xff0c;并生产出一种新的&#xff0c;能以…

ekho 编译安装

ekho 编译安装 ekho 编译安装ekho 介绍源码下载源码编译编译依赖编译 测试 参考文献 ekho 编译安装 ekho 介绍 Ekho&#xff08;余音&#xff09;是一个免费、开源的中文语音合成软件。它是eGuideDog project.项目的一部分。 它目前支持粤语、普通话&#xff08;国语&#xf…

【无人机协同】基于改进灰狼算法实现多峰环境下的多无人机协同路径规划附matlab代码

% 初始化算法参数 num_drones 5; % 无人机数量 num_iterations 100; % 迭代次数 num_wolves 20; % 灰狼数量 alpha 0.5; % 狼群更新参数 beta 0.8; % 狼个体更新参数 delta 0.5; % 灰狼群体更新参数 lb [0 0]; % 路径范围下限 ub [100 100]; % 路径范围上限 % 初始化无…

Transformer学习(2)

这是Transformer的第二篇文章&#xff0c;上篇文章中我们了解了分词算法BPE&#xff0c;本文我们继续了解Transformer中的位置编码和核心模块——多头注意力。下篇文章就可以实现完整的Transformer架构。 位置编码 我们首先根据BPE算法得到文本切分后的子词标记&#xff0c;然…

拿捏红黑树(C++)

文章目录 前言一、红黑树介绍二、插入操作三、验证红黑树四、红黑树与AVL性能比较与应用五、总体代码总结 前言 我们之前介绍了一种AVL的高阶数据结构&#xff0c;在本篇文章中&#xff0c;我们将会介绍一种与AVL旗鼓相当的数据结构–红黑树。 我们并且会对它的部分接口进行模…

C语言面试题30至39题

30. 用变量a给出下面定义 由于题目没有提供具体的定义&#xff0c;这里给出几个常见的变量定义示例&#xff1a; 整数变量&#xff1a;int a;字符变量&#xff1a;char a;浮点变量&#xff1a;float a;双精度浮点变量&#xff1a;double a;指针变量&#xff1a;int *a; 31. …

Mongo 地理位置查询:海量密集点转换成聚合信息

通俗来说&#xff1a;将地图上的海量密集点通过网格分割的方式实现聚合&#xff1b; 需求&#xff1a;用mongo实现设备地理位置聚合查询 &#xff1a;多边形&#xff0c;矩形查询; 背景&#xff1a;上万设备数据量 目的&#xff1a;分享Mongo地理位置查询&#xff0c;以及文…

zdppy_amauth 实现给角色批量绑定权限

新增接口 api.resp.post("/auth/role_auth", amauth.role.add_auths)如何测试 如何测试能不能给指定的角色批量的添加权限呢&#xff1f; 1、需要新建一个角色2、需要拿到这个角色的ID3、需要新增三个权限4、需要拿到新增的三个权限的ID5、拿着角色ID和权限ID列表…

SSL代码签名最佳实践

代码签名就是软件发布者使用全球可信的证书颁发机构CA颁发的代码签名证书对软件代码进行签名&#xff0c;由此来验证软件开发者的真实身份&#xff0c;确保软件代码的完整性和可信任性。然而&#xff0c;攻击者一直试图渗透代码签名&#xff0c;意将恶意软件嵌入可信代码中。由…

【二叉树】Leetcode 637. 二叉树的层平均值【简单】

二叉树的层平均值 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[3.00000,14.50000,11.00000] 解释&#xff1a…

前端 JS 经典:如何实现私有字段

前言&#xff1a;方法有很多&#xff0c;但是我们需要择优选择。 1. 命名规范 我们可以通过命名规范实现私有字段&#xff0c;如&#xff1a;下划线 缺点&#xff1a;没有强约束力&#xff0c;我们用了也就用了 class A {_key 1; }const a new A(); a._key; // 1 2. Sym…

深入探讨5种单例模式

文章目录 一、对比总览详细解释 二、代码1. 饿汉式2. 饱汉式3. 饱汉式-双检锁4. 静态内部类5. 枚举单例 三、性能对比 一、对比总览 以下是不同单例模式实现方式的特性对比表格。表格从线程安全性、延迟加载、实现复杂度、反序列化安全性、防反射攻击性等多个方面进行考量。 …

必应bing国内广告怎样开户投放呢?

企业都在寻找高效、精准的营销渠道以扩大品牌影响力&#xff0c;提升市场占有率&#xff0c;作为全球第二大搜索引擎&#xff0c;微软旗下的必应Bing凭借其卓越的搜索技术和庞大的用户基础&#xff0c;成为了众多企业拓展市场的首选广告平台。在中国&#xff0c;必应Bing广告以…

Day33

Day33 SQL-续 数据类型 tinyint、int、unsigned、float、double、decimal、char、varchar、BLOB、LONGBLOB、TEXT、LONGTEXT、date、time、datetime、timestamp、year # 数据类型# 整数类型 ------------------------------------------------------------- # tinyint - 1字节…

vuInhub靶场实战系列-DC-6实战

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置二、信息收集2.1 主机发现2.1.1 nmap扫描存活主机2.1.2 arp-scan扫描存活主机 2.2 端口扫描2.3 指纹识别2.3.1 尝试指纹识别2.3.…

【LC刷题】DAY01:704. 二分查找、27. 移除元素

【LC刷题】DAY01&#xff1a;704. 二分查找、27. 移除元素 文章目录 【LC刷题】DAY01&#xff1a;704. 二分查找、27. 移除元素704. 二分查找 [link](https://leetcode.cn/problems/binary-search/description/)第一思路&#xff1a;优化思路 27. 移除元素 [link](https://leet…

解决Mac无法上网/网络异常的方法,重置网络

解放方法 1、前往文件夹&#xff1a;/Library/Preferences/SystemConfiguration 2 、在弹窗中输入上边的地址 3 、把文件夹中除了下图未选中的文件全部删掉&#xff0c;删除时需要输入密码 4 、重启mac 电脑就搞定了。

python的一种集成开发工具:PyCharm开发工具

一. 简介 本文简单了解两种 python语言所使用的 集成开发环境&#xff1a; PyCharm、vscode。 python语言学习中&#xff0c;可以任意选中这两个集成开发环境的一种就可以。本文先来简单学习 PyCharm开发工具安装与使用。 二. python的一种集成开发工具&#xff1a;PyChar…