当前位置： 首页 > news >正文

JavaScript 计时事件

news 2026/5/10 16:25:36

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&#xff0c;我们有能力做到在一个设定的时间间隔之后来执行代码&#xff0c;而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScript 中使用计时事件是很容易的&#xff0c;两个关键方法是: setInterval() - 间隔指定的…...

编程日记 2023/5/28 7:56:58

七大排序算法的多语言代码实现

文章目录 前言 一、排序算法 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…...

编程日记 2023/5/5 23:10:14

【基础算法】表达式计算

中缀表达式:我们平常见到的正常数学式子 后缀表达式&#xff1a;12-3* 后缀表达式对于计算机很容易计算&#xff0c;只需要从头部扫描字符串。然后遇到数字就入栈&#xff0c;遇到运算符就取出栈顶的两个数进行运算。最后把运算结果入栈&#xff0c;最后栈中就会剩一个数为答…...

编程日记 2023/5/5 13:21:31

动态规划问题

目录 一、动态规划简介 二、利用动态规划解决问题 1、斐波拉契序列 2、拆分词句 3、三角形最小路径和 4、不同的路径数目&#xff08;一&#xff09; 5、带权值的最小路径和 6、求路径ii 7、01背包 8、不同子序列 9、编辑距离 10、分割回文串 一、动态规划…...

编程日记 2023/5/14 12:34:56

【MySQL进阶】 存储引擎 索引

&#x1f60a;&#x1f60a;作者简介&#x1f60a;&#x1f60a; &#xff1a; 大家好&#xff0c;我是南瓜籽&#xff0c;一个在校大二学生&#xff0c;我将会持续分享Java相关知识。 &#x1f389;&#x1f389;个人主页&#x1f389;&#x1f389; &#xff1a; 南瓜籽的主页…...

编程日记 2023/5/13 15:18:18

5 款最好的免费 SSD 数据恢复软件

SSD&#xff08;固态硬盘&#xff09;提供比传统硬盘更快的读/写速度&#xff0c;使启动、软件加载和游戏启动更快。因此&#xff0c;在我们选择存储设备时&#xff0c;它是一个极好的选择。但是&#xff0c;它仍然存在数据丢失的风险。假设您是受害者之一&#xff0c;正在寻找…...

编程日记 2023/5/6 14:31:22

MyBatis案例 | 使用映射配置文件实现CRUD操作——删除数据

本专栏主要是记录学习完JavaSE后学习JavaWeb部分的一些知识点总结以及遇到的一些问题等&#xff0c;如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 本专栏地址&#xff1a;&#x1f525;JavaWeb Java入门篇&#xff1a; &#x1f525;Java基础学习篇 Java进阶学习篇&…...

编程日记 2023/5/20 7:44:14

CSDN 编程竞赛二十八期题解

竞赛总览 CSDN 编程竞赛二十八期&#xff1a;比赛详情 (csdn.net) 本期竞赛的题目都很简单&#xff0c;但是非常考验读题和编码速度。这一次没有遇到bug&#xff0c;竞赛体验较好。 竞赛题解 题目1、小Q的鲜榨柠檬汁 团建活动是大家所想要的。小Q给大家准备了鲜橙汁。现在…...

编程日记 2023/6/1 10:14:23

DML数据操纵语言

DML数据操纵语言 目录概述一、插入语句(一)方式一(二)方式二&#xff1a;(三)两种方式的比较二、修改语句三、删除语句概述方式一&#xff1a;delete方式二&#xff1a;truncate语句 【清空语句】delete VS truncate 【面试题&#xff01;&#xff01;&#xff01;】概述 数据…...

编程日记 2023/5/9 10:49:42

【Hello Linux】Linux工具介绍 （gcc/g++ gdb）

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;介绍Linux的常用工具gcc/g 以及gbd Linux工具介绍gcc / ggcc / g的作用为什么语言要经过这四步才能变为可执行指令gcc / g语法预处理编…...

编程日记 2023/5/21 20:53:33

TeamFiltration：一款针对O365 AAD账号安全的测试框架

关于TeamFiltration TeamFiltration是一款针对O365 AAD账号安全的跨平台安全测试框架&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以轻松对O365 AAD账号进行枚举、喷射、过滤和后门植入等操作。TeamFiltering与CrackMapExec非常相似&#xff0c;它可以创建并维护一…...

编程日记 2023/5/6 15:40:16

你是真的“C”——Visual Studio 2022（VS2022）编译器 -—实用调试技巧

你是真的“C”——Visual Studio 2022&#xff08;VS2022&#xff09;编译器 -—实用调试技巧&#x1f60e;前言&#x1f64c;1. 什么是bug&#xff1f;&#x1f64c;2. 调试是什么&#xff1f;有多重要&#xff1f;&#x1f64c;2.1 调试是什么&#xff1f;2.2 调试的基本步骤…...

编程日记 2023/5/29 11:49:34

数据结构与算法：7种必须会的排序以及3种非基于比较排序

1.什么是排序 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序…...

编程日记 2023/3/19 21:55:01

数据库用户数

Oracle的用户数 oracle软件内部并没对用户数做限制&#xff0c;买5个用户数&#xff0c;指你买了5个user licences&#xff0c;从法律上只能连5个session&#xff0c;超过5个的连接都是非法的。oracle不给你技术上的限制&#xff0c;可是给你法律上的限制。 一般来讲&#xf…...

编程日记 2023/5/10 16:58:57

nginx如何用html显示多个图片并加入播放链接

需求背景通过nginx来做个点播服务&#xff0c;ffmpeg截取视频中的某一帧作为视频的封面&#xff0c;前端页面展示这个封面&#xff0c;&#xff0c;并链接到对应的视频播放链接&#xff0c;加载播放器进行播放简单介绍一下ffmpeg截取视频中的某一帧的方式截取视频的第一帧&…...

编程日记 2023/5/8 18:19:30

【蓝桥杯集训·每日一题】Acwing 3729. 改变数组元素

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维差分区间合并一、题目 1、原题链接 3729. 改变数组元素 2、题目描述 给定一个空数组 V 和一个整数数组 a1,a2,…,an。 现在要对数组 V 进行 n 次操作。 第 i 次操作的…...

编程日记 2023/5/25 1:40:27

springmvc执行流程

文章目录前言一、springMVC请求执行流程二、组件说明以下组件通常使用框架提供实现&#xff1a;总结前言 本篇文章是对springmvc的补充 接上篇文章springmvc入门https://blog.csdn.net/l_zl2021/article/details/127120873 一、springMVC请求执行流程 1.用户发送请求至前端控制…...

编程日记 2023/5/23 11:55:30

SpringMVC(2)

一)接受到JSON格式的数据:使用RequestBody来进行接收 ResponseBody表示的是返回一个非页面的数据 RequestBody表示的是后端要接受JSON格式的数据 一)接收单个格式的JSON格式的数据&#xff0c;我们使用一个对象来进行接收 1)我们之前接受GET请求中的queryString中的参数的时候&…...

编程日记 2023/5/31 20:16:19

Jackson序列化json时null转成空串或空对象

在项目中可能会遇到需要将null转""&#xff0c;可以通过以下方法解决。一&#xff1a;添加JacksonConfig 配置import com.fasterxml.jackson.core.JsonGenerator;import com.fasterxml.jackson.databind.JsonSerializer;import com.fasterxml.jackson.databind.Objec…...

编程日记 2023/4/14 23:37:14

如何将Python的上级目录的文件导入？【from.import】

假如有如下目录&#xff1a; -python ----file1 ---------file1_1 ------------------pfile1_1.py ---------pfile1.py ----file2 ---------pfile2.py ----pfile.py ----data.py 在pfile1_1.py中想要将pfile.py 导入怎么办&#xff1f; 首先将其上级目录添加到系统目…...

编程日记 2023/5/2 14:52:38

如何为你的Nextjs应用快速添加Taotoken大模型对话功能

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 如何为你的Nextjs应用快速添加Taotoken大模型对话功能 1. 项目准备与环境变量配置 在开始集成之前&#xff0c;你需要一个可运行的…...

编程新知 2026/5/10 15:55:43

AI原生设计“黑匣子”终结者（SITS 2026合规白皮书节选）：10个必须嵌入的可解释性锚点与审计追踪模式

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生设计范式跃迁&#xff1a;从黑箱智能到SITS 2026可审计基线 AI系统正经历一场根本性重构&#xff1a;设计重心从“能否运行”转向“为何可信”。SITS 2026&#xff08;Software-Intelligence Tra…...

编程新知 2026/5/10 15:45:38

Claw Companion：OpenClaw网关的移动控制中心设计与实战

1. 项目概述&#xff1a;Claw Companion&#xff0c;一个为OpenClaw网关打造的移动控制中心如果你正在寻找一个能让你在手机上轻松管理OpenClaw网关的工具&#xff0c;那么Claw Companion for Android&#xff08;以下简称Claw Companion&#xff09;绝对值得你花时间深入了解。…...

编程新知 2026/5/10 15:06:35

别再只盯着机械雷达了！聊聊MEMS、相控阵这些固态激光雷达到底强在哪

固态激光雷达技术革命&#xff1a;MEMS与相控阵如何重塑自动驾驶感知格局 当Waymo第五代自动驾驶系统将MEMS激光雷达成本压缩至7500美元时&#xff0c;行业终于意识到固态化浪潮已不可逆转。传统机械式激光雷达的旋转部件正如内燃机之于电动车&#xff0c;正在经历一场静默但彻…...

编程新知 2026/5/10 13:58:38

手把手教你用checksts.py脚本，提前给VMware vCenter的STS证书做‘体检’（避坑指南）

企业级vCenter运维&#xff1a;STS证书主动检测与全生命周期管理实践 当vCenter突然弹出503 Service Unavailable错误时&#xff0c;多数运维团队的第一反应是检查服务状态和网络连接&#xff0c;却很少有人会想到——这可能是由那个"沉默的定时炸弹"STS证书过期引发…...

编程新知 2026/5/10 13:27:46

多模态AI在病理诊断中的应用：从图像识别到跨模态协同决策

1. 项目概述&#xff1a;当AI“看见”并“理解”癌症在病理诊断领域&#xff0c;印戒细胞癌一直是一个让医生们倍感棘手的对手。这种癌细胞形态特殊&#xff0c;细胞质内充满黏液&#xff0c;将细胞核挤到一侧&#xff0c;形如一枚戒指&#xff0c;因而得名。它的狡猾之处在于&…...

编程新知 2026/5/10 12:12:38

别光看答案！用C语言亲手算算：10年后你的存款和房贷会怎样？（附谭浩强第五版第三章实战代码）

用C语言打造个人财务计算器&#xff1a;从GDP预测到房贷规划实战 当你第一次翻开谭浩强教授的《C程序设计》第三章&#xff0c;那些关于GDP增长、存款利息和房贷计算的习题可能看起来只是枯燥的数学练习。但换个角度想&#xff0c;这些公式正是构建个人财务规划工具的基础模块。…...

编程新知 2026/5/10 11:33:08

ThinkPad风扇控制终极指南：TPFanCtrl2让你的笔记本静音又高效

ThinkPad风扇控制终极指南&#xff1a;TPFanCtrl2让你的笔记本静音又高效 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 ThinkPad用户们&#xff0c;你是否厌倦了笔记…...

编程新知 2026/5/10 11:24:45

观察Taotoken用量看板如何帮助优化模型选型策略

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察Taotoken用量看板如何帮助优化模型选型策略 作为项目技术负责人&#xff0c;在引入大模型能力时&#xff0c;我们常常面临一个…...

编程新知 2026/5/10 11:12:40

catlass ASWT策略说明

Adaptive Sliding Window Tiling策略说明 【免费下载链接】catlass 本项目是CANN的算子模板库&#xff0c;提供NPU上高性能矩阵乘及其相关融合类算子模板样例。 项目地址: https://gitcode.com/cann/catlass ASWT(Adaptive Sliding Window Tiling)策略决定了基本块的分核…...

编程新知 2026/5/10 10:00:47