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

javaScript:快乐学习计时器

news 2025/9/14 4:37:24

目录

一.前言

二.计时器

1.计时器的分类

2. 创建计时器的方式

创建间隔计时器

创建方式三种

1.匿名函数

2.使用函数直接作为计时器的执行函数

 2.使用函数直接作为计时器的执行函数,用字符串的形式写入

 3.计时器的返回值

4.清除计时器

 5.延迟计时器

 相关代码

一.前言

        在 JavaScript 中，计时器（Timer）是一种用于执行定时任务的机制。它允许你在指定的时间间隔执行代码或者在一定延迟后执行代码。JavaScript 提供了两种主要的计时器函数：setTimeout 和 setInterval。

二.计时器

1.计时器的分类

计时器分为两种

     间隔计时器：设置每隔多久执行一次操作或者函数

     延迟计时器：设置延迟多久才执行操作或者函数

2. 创建计时器的方式

创建间隔计时器

使用方法是 setInterval()

参数有两个

参数1：执行的函数

参数2：时间间隔，单位是ms，1s = 1000ms

let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);

 

创建方式三种

1.匿名函数

     setInterval(function(){

          //code

     },1000)

2.使用函数直接作为计时器的执行函数

     function show(){}

     setInterval(show,1000);

 2.使用函数直接作为计时器的执行函数,用字符串的形式写入

     function show(){}

     setInterval('show()',1000);

 3.计时器的返回值

       计时器的返回值，返回值是当前浏览器分配给计时器的编号，谷歌从1开始火狐从2开始，edge是从1开始

4.清除计时器

 清除计时器：

        清除间隔计时器

        clearInterval（计时器对应的编号）

let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);

 5.延迟计时器

延迟计时器

      setTimeout(function(){

          //code

       },1000)

     含义是1s之后再执行函数中的代码（执行一次就完了，一般不清除

     清除延迟计时器，一般不清除

     clearTimeout（计时器对应的编号）

//延时计时器
btn.onclick = function(){setTimeout(function(){alert('计时器不好玩')},1000)
}

 相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计时器</title><style>*{margin: 0;padding: 0;}#time{width: 200px;height: 30px;text-align: center;line-height: 30px;border: 1px #f00 solid;font-size: 20px;}</style>
</head>
<body><p id="time">10</p><button id="start">点击开始</button><button id="stop1">点击停止倒计时</button><button id="btn">点击一秒后弹出</button>
</body>
</html>
<script>
/*
计时器
1.属于BOM中的内容
2.计时器分为两种间隔计时器：设置每隔多久执行一次操作或者函数延迟计时器：设置延迟多久才执行操作或者函数
3.创建计时器的方式创建间隔计时器使用方法是 setInterval()参数有两个参数1：执行的函数参数2：时间间隔，单位是ms，1s = 1000ms创建方式三种1.匿名函数setInterval(function(){//code},1000)2.使用函数直接作为计时器的执行函数function show(){}setInterval(show,1000);2.使用函数直接作为计时器的执行函数,用字符串的形式写入function show(){}setInterval('show()',1000);计时器的返回值，返回值是当前浏览器分配给计时器的编号，谷歌从1开始火狐从2开始，edge是从1开始计时器函数里面的变量，属于局部变量，因此外面的操作不能直接操作计时器内部的变量，可以理解为外部的操作不会对计时器内部照成影响清除计时器： 清除间隔计时器clearInterval（计时器对应的编号）延迟计时器setInterval(function(){//code},1000)含义是1s之后再执行函数中的代码（执行一次就完了，一般不清除清除延迟计时器，一般不清除clearTimeout（计时器对应的编号）
*/ 
let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);//点击停止倒计时
stop1.onclick = function(){clearInterval(n)
}function show(){let r = Math.floor(Math.random()*256)let g= Math.floor(Math.random()*256)let b = Math.floor(Math.random()*256)time.style.background = `rgb(${r},${g},${b})`
}
start.onclick = function(){//在使用前先清除，防止计时器累计clearInterval(timer)timer = setInterval(show,1000)
}//延时计时器
btn.onclick = function(){setTimeout(function(){alert('计时器不好玩')},1000)
}
</script>

相关文章：

javaScript:快乐学习计时器

目录 一.前言 二.计时器 1.计时器的分类 2. 创建计时器的方式 创建间隔计时器 创建方式三种 1.匿名函数 2.使用函数直接作为计时器的执行函数 2.使用函数直接作为计时器的执行函数,用字符串的形式写入 3.计时器的返回值 4.清除计时器 5.延迟计时器 相关代码 一.前言 在…...

编程日记 2023/8/18 17:34:57

onnxruntime 支持的所有后端

1 代码导出 import onnxruntime as ort aaa ort.get_all_providers() print(aaa)1. 1 下面是ort支持的所有后端 TensorrtExecutionProvider, CUDAExecutionProvider, MIGraphXExecutionProvider, ROCMExecutionProvider, OpenVINOExecutionProvider, DnnlExecutionProvider…...

编程日记 2023/8/18 17:33:56

k8s 自身原理 5

我们知道容器是通过 pod 来承载的&#xff0c;我们在 k8s 中&#xff0c;服务都是跑在 pod 里面的&#xff0c;pod 里面可以跑 1 个容器&#xff0c;或者跑多个容器&#xff0c;那么咱们 pod 里面跑 1 个服务容器&#xff0c;咱真的就以为里面就只有这样个容器吗&#xff1f; …...

编程日记 2023/8/18 17:32:54

机器视觉应用开发什么最重要？

&#xff08;QQ群有答疑&#xff09;零基础小白快速上手海康VisionMaster开发系列课程 高级语言在机器视觉就是工具&#xff0c;机器视觉软件&#xff0c;在机器视觉中也是工具&#xff0c;在机器视觉应用开发中&#xff0c;图像处理是最重要的&#xff0c;一切看图像&#xff…...

编程日记 2023/8/18 17:31:52

React+Typescript使用接口泛型处理props

好 刚讲完组件 那么 这次 我们来看一下 数据传递的 props 还是上文的案例 例如 我们想将 title 传给Hello组件 之前我们可以直接这样 以一个标签属性的形式传过去 而我们在子组件中 这样去使用 但现在 我们从编辑器中都可以看出 这种写法已经不行了 然后 我们将 hello 组件…...

编程日记 2023/8/18 17:30:50

自定义python文件import导入ModuleNotFoundError: No module named ‘***‘ 问题

自定义python文件import导入ModuleNotFoundError: No module named ‘***’ 问题 错误代码&#xff1a; import configparser import os.path import sys from bin import swk_mysql_create, swk_redis_create这里导入自定义python文件&#xff0c;其中swk_mysql_create.py文…...

编程日记 2023/8/18 17:29:48

Codeforces Round 893 (Div. 2)B题题解

文章目录 [The Walkway](https://codeforces.com/contest/1858/problem/B)问题建模问题分析1.分析所求2.如何快速计算每个商贩被去除后的饼干数量代码 The Walkway 问题建模 给定n个椅子&#xff0c;其中有m个位置存在商贩&#xff0c;在商贩处必须购买饼干吃&#xff0c;每隔…...

编程日记 2023/8/18 17:28:46

HTTP响应状态码大全：从100到511，全面解析HTTP请求的各种情况

文章目录 前言一、认识响应状态码1. 什么是HTTP响应状态码2. Http响应状态码的作用3. 优化和调试HTTP请求的建议 二、1xx 信息响应1. 认识http信息响应2. 常见的信息响应状态码 三、2xx 成功响应1. 认识HTTP成功响应2. 常见的成功响应状态码 四、3xx 重定向1. 认识http重定向2.…...

编程日记 2023/8/18 17:27:45

Vue-10.集成.env

.env、.env.development 和 .env.preview .env、.env.development 和 .env.preview 文件是用于配置环境变量和应用程序设置的文件&#xff0c;它们在项目开发和部署过程中起到关键作用。这些文件用于在不同的环境中设置不同的变量值&#xff0c;以满足不同环境下的配置需求。 …...

编程日记 2023/8/18 17:26:44

强训第33天

选择 C A ping是TCP/IP协议族的一部分&#xff0c;使用ICMP协议&#xff0c;ICMP底层使用IP协议。如果要ping其他网段&#xff0c;则需要设置网关。 如果是二层交换机故障&#xff0c;则ping同网段的也会不通。 C Dos攻击被称之为“拒绝服务攻击”&#xff0c;其目的是使计算机…...

编程日记 2023/8/18 17:25:42

【CTF-web】buuctf-[极客大挑战 2019]EasySQL 1（sql注入）

题目链接 根据题目判断出可能需要sql注入&#xff0c;看源码可知数据是通过GET的方式传输的&#xff0c;即放在url的username和password两个参数中。 只要将username输入为1 or 11#&#xff0c;password可以为任何值&#xff0c;即可顺利登录。 需要注意的是url中的井号表示…...

编程日记 2023/8/18 17:24:40

脚本语言与编译语言的区别

文章目录 一、语法差异二、执行方式差异三、应用领域差异四、总结 一、语法差异 脚本语言&#xff1a;脚本语言通常使用解释器逐行执行&#xff0c;不需要事先编译。它的语法相对简单&#xff0c;易于学习和使用。常见的脚本语言有Python、JavaScript和Ruby等。 编译语言&…...

编程日记 2023/8/18 17:23:39

大型企业或者组织，组建专属的虚拟局域网，深入理解相关的配置和搭建使用、网络加速和网络优化，可夸地区夸国际使用，深入搞懂每项配置的作用和含义

大型企业或者组织，组建专属的虚拟局域网，深入理解相关的配置和搭建使用、网络加速和网络优化，可夸地区夸国际使用，深入搞懂每项配置的作用和含义。 1、openxxx介绍与图解 1.1 openxxx介绍 openxxx 是一个基于 OpenSSL库的应用层 虚拟局域网 实现。和传统 虚拟局域网 相…...

编程日记 2023/8/18 17:22:37

数据结构：二叉树的递归实现(C实现)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》 文章目录 前言一、树的概念二、二叉树二叉树的概念二叉树的性质 三、二叉树链式结构实现二叉树节点定义创建二叉树节点遍历二叉树先序遍历二叉树(BinaryTreePrevOrder)中序遍历二叉树(BinaryTree…...

编程日记 2023/8/18 17:21:35

MinGW编译运行报错RTTI symbol not found for class ‘XXX‘

最近在调试程序时莫名的出现图中报错&#xff1a; 还遇到过for class QObject&#xff0c;在此记录一下&#xff0c;排查后发现&#xff0c;原因都是有资源被重复释放导致的。...

编程日记 2023/8/18 17:20:34

table表头颜色 element plus

原图 预期 css :deep(.el-table__header) {background-color: #F5F7FA;} :deep(.el-table tr) {background-color: rgba(0,0,0,0);} :deep(.el-table th.el-table__cell) {background-color: rgba(0,0,0,0);}...

编程日记 2023/8/18 17:19:33

网络安全（自学）

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…...

编程日记 2023/8/18 17:18:31

FPGA芯片IO口上下拉电阻的使用

FPGA芯片IO口上下拉电阻的使用 为什么要设置上下拉电阻一、如何设置下拉电阻二、如何设置上拉电阻为什么要设置上下拉电阻 这里以高云FPGA的GW1N-UV2QN48C6/I5来举例，这个芯片的上电默认初始化阶段，引脚是弱上来模式，且模式固定不能通过软件的配置来改变。如下图所示： 上…...

编程日记 2023/8/18 17:17:29

掌握指针进阶：一篇带你玩转函数指针、函数指针数组及指向函数指针数组的指针！！

&#x1f341;博客主页&#xff1a;江池俊的博客 &#x1f4ab;收录专栏&#xff1a;C语言进阶之路 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa;我的社区&#xff1a;GeekHub &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文章目录 一…...

编程日记 2023/8/18 17:16:27

在Docker上部署2台节点，利用Keeplived实现双节点VIP 高可用,不需要关闭Keeplived，实现vip来回切换。

前言： keeplived的做高可用网上有很多例子，但是都存在这样那样的问题，比如: 1.使用的是默认抢占式，这样在主节点恢复后，又会将VIP 漂移回到主节点上，因此需要使用非抢占式模式，故障恢复时，可避免 VIP 切换造成的服务延迟。 2.使用的是默认组播，信息都会向默认的224.0.…...

编程日记 2023/8/18 17:15:26

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/13 15:40:26

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/10 11:45:24

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/7 3:46:41

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/9 22:39:04

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/9/12 20:17:08

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/8/18 17:38:23

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/9/13 23:29:05

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/8/9 22:34:22

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18