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

javaScript:快乐学习计时器

news 2026/3/28 7:19:59

目录

一.前言

二.计时器

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

centos7安装MySQL8.4手册

目录前言一、首先更新插件&#xff0c;并查看当前系统版本二、安装步骤--在线安装1、创建mysql目录2、安装rpm包3、安装 mysql-community-server4、启动MySQL服务5、查看MySQL状态6、设置开机自启动三、查看默认密码四、登录mysql五、修改密码六、开启远程访问1. 修改 MySQL 配…...

编程新知 2026/3/28 6:00:26

如何通过Superalgos教育模块快速掌握算法交易：新手入门完整指南

如何通过Superalgos教育模块快速掌握算法交易&#xff1a;新手入门完整指南 【免费下载链接】Superalgos Superalgos/Superalgos: 是一个开源的分布式社交网络分析和数据挖掘平台。适合对大数据分析、机器学习、区块链以及分布式系统有兴趣的开发者。 项目地址: https://gitc…...

编程新知 2026/3/28 5:22:03

mrm-can-bus：轻量级嵌入式CAN设备服务协议库

1. 项目概述mrm-can-bus是一个面向嵌入式设备控制场景的轻量级 CAN 总线通信库&#xff0c;定位为“CAN Bus connectivity and local functions exposed via CAN Bus, common part”——即提供标准化的 CAN 连接能力&#xff0c;并将本地设备功能&#xff08;如 GPIO 控制、ADC…...

编程新知 2026/3/28 5:00:28

【计算机组成原理】1 计算机组成原理学习路线：从晶体管到云架构的知识图谱

1 为什么你需要一张知识图谱 计算机组成原理是计算机科学的核心基石&#xff0c;它研究计算机硬件系统的基本组成原理、逻辑实现及工作机制。对于计算机专业学生或软件开发者而言&#xff0c;理解"代码如何在硬件上运行"不仅是应试需要&#xff0c;更是性能优化、系统…...

编程新知 2026/3/28 3:59:48

MambaAD实战：5分钟搞定工业缺陷检测的SoTA模型部署（附代码）

MambaAD工业缺陷检测实战&#xff1a;从模型原理到产线部署全指南 引言&#xff1a;当状态空间模型遇见工业质检 在液晶面板生产线上&#xff0c;一个0.1mm的亮点缺陷可能导致整批产品报废&#xff1b;在汽车零部件铸造车间&#xff0c;细微的表面裂纹可能引发严重的安全隐患。…...

编程新知 2026/3/28 3:21:20

IDEA插件开发实战：手把手教你开发首个效率工具（附GitHub源码）

IDEA插件开发实战&#xff1a;从零打造你的专属效率工具 JetBrains系列IDE的强大之处不仅在于其核心功能&#xff0c;更在于其开放的插件生态系统。作为一名Java开发者&#xff0c;你是否曾想过为IDEA添加一个能提升自己工作效率的专属工具&#xff1f;本文将带你从零开始&…...

编程新知 2026/3/28 2:55:11

IP5306电源芯片的‘怪脾气’：实测开机半分钟就休眠？手把手教你两个硬件调试技巧

IP5306电源芯片实战调试&#xff1a;破解自动休眠难题的硬件级方案 实验室里&#xff0c;示波器屏幕上那条本该稳定的电压线突然跌落至零&#xff0c;系统再次陷入休眠——这已经是今天第七次重现IP5306芯片的"怪脾气"。作为一款广泛应用于移动电源的高集成度SOC&…...

编程新知 2026/3/28 2:32:53

煤矿电液阀系统摄像仪护套连接器 DLJ01(1000)参数

在煤矿综采工作面液压支架电液控制系统中&#xff0c;摄像仪护套连接器 DLJ01(1000)作为矿用本安型摄像仪与电源、信号传输线缆之间的专用接口&#xff0c;承担着视频信号与供电的稳定传输任务。其型号中的“1000”代表线缆长度为1000mm&#xff08;1米&#xff09;&#xff0c…...

编程新知 2026/3/27 23:22:38

Llama-3.2V-11B-cot从零部署：Docker镜像运行与端口映射详解

Llama-3.2V-11B-cot从零部署&#xff1a;Docker镜像运行与端口映射详解 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。它针对双卡4090环境进行了深度优化&#xff0c;特别适合想要体验Llama多模态大模型但缺乏专业部署…...

编程新知 2026/3/27 23:14:37

Spring Boot Helper插件免费版获取与版本适配全攻略

1. 为什么我们需要Spring Boot Helper插件 作为一个常年使用IntelliJ IDEA开发Spring Boot项目的程序员&#xff0c;我深刻体会到这个插件的重要性。简单来说&#xff0c;它就像是Spring Boot开发的"瑞士军刀"&#xff0c;能帮我们快速创建项目、自动配置依赖、一键…...

编程新知 2026/3/27 22:42:23