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

JavaScript 计时事件

news 2026/3/25 22:17:42

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

python沉浸式戏曲文化体验系统vue3

目录 系统架构设计前端实现方案后端Python服务沉浸式体验关键技术开发里程碑计划测试策略部署方案 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 系统架构设计 采用前后端分离架构&#xff0c;前端使用Vue3TypeScriptPinia构…...

编程新知 2026/3/25 21:54:44

IPTV抓包工具合集：Wireshark、parse_cap_channels_v2、IPTV全能工具箱

分享一个刚刚大佬那里转存过来的IPTV工具箱v5.2版本。先叠个甲&#xff0c;这仅仅是一个单纯的源检测和管理工具分享&#xff0c;不包含任何IPTV源地址&#xff0c;也不涉及任何违规教程。如果版主认为违规请直接删帖。 这个软件主打一个省心。不需要你自己有服务器&#xff0c…...

编程新知 2026/3/25 21:38:40

RVC变声模型在IDEA开发环境中的调试技巧

RVC变声模型在IDE开发环境中的调试技巧 调试AI模型项目&#xff0c;尤其是像RVC&#xff08;Retrieval-based Voice Conversion&#xff09;这种涉及音频处理和深度学习的项目&#xff0c;常常让人头疼。你可能会遇到各种问题&#xff1a;代码在本地跑不通、张量形状对不上、模…...

编程新知 2026/3/25 20:51:57

别再只改max_clients了！CentOS 7上vsftpd 3.0.2并发性能实战调优（附Java压测代码）

CentOS 7下vsftpd 3.0.2高并发调优实战&#xff1a;突破传统认知的性能优化指南 在Linux服务器运维领域&#xff0c;FTP服务的高并发性能优化一直是个被低估的技术难点。许多工程师习惯性地将注意力集中在max_clients和max_per_ip这两个显性参数上&#xff0c;却忽略了那些真正…...

编程新知 2026/3/25 20:47:57

如何快速搭建Sub-Web：Vue前端配置生成器完整指南

如何快速搭建Sub-Web&#xff1a;Vue前端配置生成器完整指南 【免费下载链接】sub-web 项目地址: https://gitcode.com/gh_mirrors/su/sub-web Sub-Web是基于Vue.js 2.6与subconverter后端实现的订阅配置自动生成Web界面&#xff0c;提供简洁美观的前端界面&#xff0c…...

编程新知 2026/3/25 19:09:25

语析Yuxi-Know：构建企业级智能知识管理系统的技术架构与实践

语析Yuxi-Know&#xff1a;构建企业级智能知识管理系统的技术架构与实践 【免费下载链接】Yuxi-Know 基于大模型 RAG 知识库与知识图谱的问答平台。Llamaindex VueJS Flask Neo4j。大模型适配 OpenAI、国内主流大模型平台的模型调用、本地 vllm 部署。 项目地址: https://…...

编程新知 2026/3/25 19:01:23

手把手教你用智慧农场小程序源码搭建自己的农业管理系统（含完整配置流程）

从零构建智慧农场小程序&#xff1a;源码解析与实战部署指南 引言&#xff1a;智慧农业的技术赋能 清晨六点&#xff0c;当大多数城市居民还在睡梦中时&#xff0c;山东寿光的菜农老张已经通过手机查看了大棚内作物的实时生长数据。温度22.3℃、湿度65%、土壤EC值1.2mS/cm——这…...

编程新知 2026/3/25 17:08:55

NFC标签技术演进与主流厂商产品选型指南

1. NFC标签技术演进&#xff1a;从Type 1到Type 5的进化之路 NFC标签技术的发展就像智能手机的迭代升级&#xff0c;每一代都在解决前代的痛点。最早的Type 1标签诞生时&#xff0c;就像功能机时代的诺基亚&#xff0c;只能存储96字节数据&#xff0c;读写速度仅有106kbps。我曾…...

编程新知 2026/3/25 17:04:55

避坑指南：Triton配置文件config.pbtxt里那些容易踩的坑（input/output参数详解）

Triton配置实战&#xff1a;input/output参数避坑手册 当你在深夜调试Triton推理服务时&#xff0c;突然看到"INVALID_ARGUMENT: unexpected inference input size"错误提示&#xff0c;而config.pbtxt文件已经反复检查了十几次——这种经历恐怕很多开发者都不陌生。…...

编程新知 2026/3/25 17:02:54

captcha_voucher 亚马逊

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 逆向过程 部分python代码url ".c…...

编程新知 2026/3/25 16:20:39