JavaScript 计时事件
JavaScript 计时事件
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScript 中使用计时事件是很容易的，两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 在指定的毫秒数后执行指定代码。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
计时器的四种方法：
1.setTimeout():指定的延迟时间之后来执行代码。
2.clearTimeout():取消setTimeout()设置。
3.setInterval():每隔指定的时间执行代码。
4.clearInterval():取消setInterval()设置。
setInterval():语法。
setInterval(代码,交互时间);
代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
（1）.利用setInterval()做一个简易时间显示：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">var attime;function clock(){var time=new Date(); attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();document.getElementById("clock").value = attime;}setInterval("clock()",1000)
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
myVar=setInterval("javascript function",milliseconds);
然后你可以使用 clearInterval() 方法来停止执行。
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){clearInterval(myVar);
}
</script>
setTimeout():语法
setTimeout(代码,延迟时间);
代码：要调用的函数或要执行的代码串。 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
（1）setTimeout()实现计数统计效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">var num=0;function startCount() {document.getElementById('count').value=num;num=num+1;setTimeout("startCount()",1000); }setTimeout("startCount()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
clearInterval(id_of_setInterval)
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">function clock(){var time=new Date(); document.getElementById("clock").value = time;}
// 每隔100毫秒调用clock函数，并将返回值赋值给ivar i=setInterval("clock()",100);
</script>
</head>
<body><form><input type="text" id="clock" size="50" /><input type="button" value="Stop" onclick="clearInterval(i)" /></form>
</body>
</html>
相关文章：
JavaScript 计时事件
JavaScript 计时事件 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScript 中使用计时事件是很容易的，两个关键方法是: setInterval() - 间隔指定的…...
七大排序算法的多语言代码实现
文章目录 前言 一、排序算法 1.原理简述 2.分类与复杂度 二、实例代码 1.冒泡排序 C Python Java Golang Rust Dephi 2.选择排序 C Python Java Golang Rust Dephi 3.插入排序 C Python Java Golang Rust Dephi 4.希尔排序 编辑 C Python Java Gola…...
【基础算法】表达式计算
中缀表达式:我们平常见到的正常数学式子 后缀表达式：12-3* 后缀表达式对于计算机很容易计算，只需要从头部扫描字符串。然后遇到数字就入栈，遇到运算符就取出栈顶的两个数进行运算。最后把运算结果入栈，最后栈中就会剩一个数为答…...
动态规划问题
目录 一、动态规划简介 二、利用动态规划解决问题 1、斐波拉契序列 2、拆分词句 3、三角形最小路径和 4、不同的路径数目（一） 5、带权值的最小路径和 6、求路径ii 7、01背包 8、不同子序列 9、编辑距离 10、分割回文串 一、动态规划…...
【MySQL进阶】 存储引擎 索引
😊😊作者简介😊😊 ： 大家好，我是南瓜籽，一个在校大二学生，我将会持续分享Java相关知识。 🎉🎉个人主页🎉🎉 ： 南瓜籽的主页…...
5 款最好的免费 SSD 数据恢复软件
SSD（固态硬盘）提供比传统硬盘更快的读/写速度，使启动、软件加载和游戏启动更快。因此，在我们选择存储设备时，它是一个极好的选择。但是，它仍然存在数据丢失的风险。假设您是受害者之一，正在寻找…...
MyBatis案例 | 使用映射配置文件实现CRUD操作——删除数据
本专栏主要是记录学习完JavaSE后学习JavaWeb部分的一些知识点总结以及遇到的一些问题等，如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 本专栏地址：🔥JavaWeb Java入门篇： 🔥Java基础学习篇 Java进阶学习篇&…...
CSDN 编程竞赛二十八期题解
竞赛总览 CSDN 编程竞赛二十八期：比赛详情 (csdn.net) 本期竞赛的题目都很简单，但是非常考验读题和编码速度。这一次没有遇到bug，竞赛体验较好。 竞赛题解 题目1、小Q的鲜榨柠檬汁 团建活动是大家所想要的。小Q给大家准备了鲜橙汁。现在…...
DML数据操纵语言
DML数据操纵语言 目录概述一、插入语句(一)方式一(二)方式二：(三)两种方式的比较二、修改语句三、删除语句概述方式一：delete方式二：truncate语句 【清空语句】delete VS truncate 【面试题！！！】概述 数据…...
【Hello Linux】Linux工具介绍 （gcc/g++ gdb）
作者：小萌新 专栏：Linux 作者简介：大二学生 希望能和大家一起进步！ 本篇博客简介：介绍Linux的常用工具gcc/g 以及gbd Linux工具介绍gcc / ggcc / g的作用为什么语言要经过这四步才能变为可执行指令gcc / g语法预处理编…...
TeamFiltration：一款针对O365 AAD账号安全的测试框架
关于TeamFiltration TeamFiltration是一款针对O365 AAD账号安全的跨平台安全测试框架，在该工具的帮助下，广大研究人员可以轻松对O365 AAD账号进行枚举、喷射、过滤和后门植入等操作。TeamFiltering与CrackMapExec非常相似，它可以创建并维护一…...
你是真的“C”——Visual Studio 2022（VS2022）编译器 -—实用调试技巧
你是真的“C”——Visual Studio 2022（VS2022）编译器 -—实用调试技巧😎前言🙌1. 什么是bug？🙌2. 调试是什么？有多重要？🙌2.1 调试是什么？2.2 调试的基本步骤…...
数据结构与算法：7种必须会的排序以及3种非基于比较排序
1.什么是排序 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。 稳定性：假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序…...
数据库用户数
Oracle的用户数 oracle软件内部并没对用户数做限制，买5个用户数，指你买了5个user licences，从法律上只能连5个session，超过5个的连接都是非法的。oracle不给你技术上的限制，可是给你法律上的限制。 一般来讲…...
nginx如何用html显示多个图片并加入播放链接
需求背景通过nginx来做个点播服务，ffmpeg截取视频中的某一帧作为视频的封面，前端页面展示这个封面，，并链接到对应的视频播放链接，加载播放器进行播放简单介绍一下ffmpeg截取视频中的某一帧的方式截取视频的第一帧&…...
【蓝桥杯集训·每日一题】Acwing 3729. 改变数组元素
文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维差分区间合并一、题目 1、原题链接 3729. 改变数组元素 2、题目描述 给定一个空数组 V 和一个整数数组 a1,a2,…,an。 现在要对数组 V 进行 n 次操作。 第 i 次操作的…...
springmvc执行流程
文章目录前言一、springMVC请求执行流程二、组件说明以下组件通常使用框架提供实现：总结前言 本篇文章是对springmvc的补充 接上篇文章springmvc入门https://blog.csdn.net/l_zl2021/article/details/127120873 一、springMVC请求执行流程 1.用户发送请求至前端控制…...
SpringMVC(2)
一)接受到JSON格式的数据:使用RequestBody来进行接收 ResponseBody表示的是返回一个非页面的数据 RequestBody表示的是后端要接受JSON格式的数据 一)接收单个格式的JSON格式的数据，我们使用一个对象来进行接收 1)我们之前接受GET请求中的queryString中的参数的时候&…...
Jackson序列化json时null转成空串或空对象
在项目中可能会遇到需要将null转""，可以通过以下方法解决。一：添加JacksonConfig 配置import com.fasterxml.jackson.core.JsonGenerator;import com.fasterxml.jackson.databind.JsonSerializer;import com.fasterxml.jackson.databind.Objec…...
如何将Python的上级目录的文件导入？【from.import】
假如有如下目录： -python ----file1 ---------file1_1 ------------------pfile1_1.py ---------pfile1.py ----file2 ---------pfile2.py ----pfile.py ----data.py 在pfile1_1.py中想要将pfile.py 导入怎么办？ 首先将其上级目录添加到系统目…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...