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 导入怎么办？ 首先将其上级目录添加到系统目…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...