首页 > 资讯 > 前端开发 > JavaScript >一篇文章带你学会JavaScript计时事件

549

分享到

一篇文章带你学会JavaScript计时事件

javascript计时事件 js 计时 js常用事件 2022-11-16 00:11:55 549人浏览独家记忆

摘要

目录javascript 计时事件setInterval() 方法clearInterval() 方法setTimeout() 方法clearTimeout() 方法总结

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScript 中使用计时事件是很容易的有四个常用方法：

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

clearInterval() -方法用于停止 setInterval() 方法执行的函数代码。

setTimeout() - 在指定的毫秒数后执行指定代码。

clearTimeout() -方法用于停止执行setTimeout()方法的函数代码。

注意: setInterval() 和 setTimeout() 是 html DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法：

window.setInterval(“javascript function”,milliseconds);

window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。

setInterval() 第一个参数是函数（function）；第二个参数间隔的毫秒数。

注意: 1000 毫秒是一秒。

实例：

显示当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟显示</title>
		<style>
			div{
				width: 300px;
				height: 100px;
				background-color: aquamarine;
				margin: 50px auto;
				text-align: center;
				line-height: 100px;
				border:1px solid black;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
		<script>
			var divEle=document.querySelector('div');
			
			setInterval(function(){dateTimes()},1000);
			//封装时间的函数
			function dateTimes(){
				var date=new Date();
				var dateHours=date.getHours();
				var dateMinutes=date.getMinutes();
				var dateSeconds=date.getSeconds();
				if(parseInt(dateHours)<10){
					dateHours='0'+dateHours;
				}
				if(parseInt(dateMinutes)<10){
					dateMinutes='0'+dateMinutes;
				}
				if(parseInt(dateSeconds)<10){
					dateSeconds='0'+dateSeconds;
				}
				var xingQi=date.getDay();
				var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
				var dateStr=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()
				+'日，'+dateHours+":"+dateMinutes+":"+dateSeconds+'，'+weeks[xingQi];
				divEle.innerText=dateStr;
				// return dateStr;
			}
			// divEle.innerText=dateTimes();
		</script>
</html>

运行效果：

请添加图片描述

clearInterval() 方法

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法：

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval(“javascript function”,milliseconds);

然后你可以使用 clearInterval() 方法来停止执行。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟显示</title>
		<style>
			div{
				width: 300px;
				height: 100px;
				background-color: aquamarine;
				margin: 50px auto;
				text-align: center;
				line-height: 100px;
				border:1px solid black;
				border-radius: 100px;
			}
			button{
				width: 100px;
				height: 30px;
				margin: 0 auto;
				margin-left: 50%;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button onclick="myStopFunction()">时间停止</button>
	</body>
		<script>
			var divEle=document.querySelector('div');
			
			var myVar=setInterval(function(){dateTimes()},1000);
			//封装时间的函数
			function dateTimes(){
				var date=new Date();
				var dateHours=date.getHours();
				var dateMinutes=date.getMinutes();
				var dateSeconds=date.getSeconds();
				if(parseInt(dateHours)<10){
					dateHours='0'+dateHours;
				}
				if(parseInt(dateMinutes)<10){
					dateMinutes='0'+dateMinutes;
				}
				if(parseInt(dateSeconds)<10){
					dateSeconds='0'+dateSeconds;
				}
				var xingQi=date.getDay();
				var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
				var dateStr=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()
				+'日，'+dateHours+":"+dateMinutes+":"+dateSeconds+'，'+weeks[xingQi];
				divEle.innerText=dateStr;
				// return dateStr;
			}
			function myStopFunction(){
				clearInterval(myVar);
			}
			// divEle.innerText=dateTimes();
		</script>
</html>

运行效果：

请添加图片描述

setTimeout() 方法

setTimeout() 在指定的毫秒数后执行指定代码。

语法：

myVar= window.setTimeout(“javascript function”, milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计时器</title>
	</head>
	<body>
		<button onclick="showAlert()">弹出警告窗</button>
	</body>
	
	<script>
		
		var result2;
		function showAlert(){
			result2 =setTimeout(function(){
				alert('hello html');
			},3000);
		}
	
	</script>
</html>

运行效果：

请添加图片描述

clearTimeout() 方法

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法：

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout(“javascript function”,milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计时器</title>
	</head>
	<body>
		<button onclick="showAlert()">弹出警告窗</button>
		<button onclick="stopAlert()">停止弹出警告窗</button>
	</body>
	
	<script>
		
		var result2;
		function showAlert(){
			result2 =setTimeout(function(){
				alert('hello html');
			},3000);
		}
		
		function stopAlert(){
			clearTimeout(result2);
		}
		
	</script>
</html>

运行效果：

请添加图片描述

总结

到此这篇关于一篇文章带你学会JavaScript计时事件的文章就介绍到这了,更多相关JavaScript计时事件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一篇文章带你学会JavaScript计时事件

本文链接: https://www.lsjlt.com/news/173051.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

一篇文章带你学会JavaScript计时事件

目录JavaScript 计时事件setInterval() 方法clearInterval() 方法setTimeout() 方法clearTimeout() 方法总结 ...

99+

2022-11-16

javascript计时事件 js 计时 js常用事件
一篇文章带你学会Spring MVC表单标签

目录form 标签input 标签password 标签checkbox 标签checkboxes 标签radiobutton 与 radiobuttons 标签select 与 o...

99+

2023-03-24

springmvc表单标签用法示例 springmvc表单标签 springmvc接收表单参数
一篇文章带你自学python Django

目录1. Django简介Django是什么？Django前景Django框架核心2. 设计模式MVT模式3. 开发环境简介4.创建虚拟环境4.1.首先安装管理环境的包以及虚拟环境包...

99+

2024-04-02
一篇文章带你了解JavaScript-语句

目录表达式语句复合语句和空语句复合语句空语句声明语句varfunction条件语句ifif/elseelse ifswitch循环whiledo/whileforfor/in跳转标签...

99+

2024-04-02
一文带你学会Java事件机制

目录委托事件模型核心组件总结相信做 Java 开发的朋友，大多都是学习过或至少了解过 Java GUI 编程的，其中有大量的事件和控件的绑定，当我们需要在点击某个按钮实现某些操作的时...

99+

2024-04-02
一篇文章带你了解JavaScript-对象

目录创建对象对象直接量通过new创建对象原型Object.create（）属性的查询和设置继承属性访问错误删除属性检测属性序列化对象总结创建对象对象直接量对象直接量是由若干名/值...

99+

2024-04-02
一文带你学会python新年倒计时

作者简介：一名在校计算机学生、每天分享Python的学习经验、和学习笔记。座右铭：低头赶路，敬事如仪个人主页：网络豆的主页目录前言一.新年介绍二.代码介绍 1.应用的技术（1）Py...

99+

2023-09-12

python pygame 开发语言
一篇文章让你搞清楚JavaScript事件循环

目录前言宏任务微任务事件循环宏任务与微任务总结参考资料前言异步函数也是有执行顺序的。本质上来说，JavaScript是单线程语言，不管是在浏览器中还是nodejs环境下。浏览器在执...

99+

2024-04-02
一篇文章带你彻底搞懂Redis 事务

目录Redis 事务简介Redis 事务基本指令实例分析Redis 事务与 ACID总结Redis 事务简介 Redis 只是提供了简单的事务功能。其本质是一组命令的集合，事务支持一...

99+

2022-11-13

redis有几种部署方式 redis事务三大特性 redis怎么做到事务回滚
一篇文章学会Vue中间件管道

通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它。在本教程...

99+

2024-04-02
一篇文章带你彻底搞懂Redis 事务

目录Redis 事务简介Redis 事务基本指令实例分析Redis 事务与 ACID总结Redis 事务简介 Redis 只是提供了简单的事务功能。其本质是一组命令的集合，事务支持一次执行多个命令，在事务执行过程中，会顺...

99+

2024-04-02
一篇文章带你深入学习Python函数

目录函数的特性：函数是对象：函数可以删除：总结函数的特性：函数是对象函数可以删除函数名字和函数本身完全是分开的函数因为是对象，可以结合数据结构使用函数因为是对象，可以作为函数参数函...

99+

2024-04-02
一篇文章带你了解vue.js的事件循环机制

目录一、事件循环机制介绍二、经典事件循环面试题总结一、事件循环机制介绍 ...

99+

2024-04-02
一篇文章带你详细了解JavaScript数组

目录一、数组的作用：二、数组的定义：1.通过构造函数创建数组2.通过字面量的方式创建数组三、数组元素四、数组长度五、数组索引（下标）六、数组注意的问题1.数组中存储的数据可以是不一样...

99+

2024-04-02
一篇文章带你学习Mybatis-Plus(新手入门)

目录Mybatis-Plus1.快速入门地址：安装 | MyBatis-Plus (baomidou.com)2.创建数据库mybatis-plus3.创建springboot项目，...

99+

2024-04-02
一篇文章带你学习python的函数与类

目录函数模块类根据类创建实例继承总结现在做的一个小项目需要用到python的相关知识，但是因为太久没用一些东西都忘掉了，因此在本篇博客中记录一下python的函数和类的基础知识，下次...

99+

2024-04-02
一篇文章带你学习Python3的高阶函数

目录1.高阶函数2.map/reduce3.filter4.sorted总结1.高阶函数 # 1.变量指向函数 # 调用函数和函数本身 print("-10的绝对值为：",abs(-...

99+

2024-04-02
一篇文章带你搞定JAVA Maven

目录1、maven是什么，为什么存在？项目结构是什么样子，怎么定位jar2、Idea 的操作1.新建maven项目2.配置仓库3.添加依赖，添加fastjson的依赖4.打包项目3、...

99+

2024-04-02
一篇文章带你入门Java Script

目录概述特点和Java的区别弱类型语言强类型语言书写位置数组函数JS中的自定义对象（扩展内容）Object形式的自定义对象JS中的事件常用的事件：动态注册基本步骤：DOM模型总结概述...

99+

2024-04-02
一篇文章带你了解JavaScript的包装类型

目录1、简介2、String1、创建语法2、常用方法3、更多方法3、Number1、语法2、属性3、常用方法4、Boolean总结1、简介【解释】：在 JavaScri...

99+

2024-04-02