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

javaScript:快乐学习计时器

news 文章来源：https://blog.csdn.net/qq_52799985/article/details/132347853 2025/5/10 15:16:45

目录

一.前言

二.计时器

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

leetcode 279. 完全平方数

2023.8.18 与零钱兑换相似&#xff0c;本题属于完全背包问题&#xff1a;完全平方数为物品&#xff0c;整数n为背包。 直接上代码&#xff1a; class Solution { public:int numSquares(int n) {vector<int> dp(n1 , INT_MAX);dp[0] 0;for(int i1; i*i<n; i){for(in…...

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

【从零学习python 】48.Python中的继承与多继承详解

文章目录 在Python中&#xff0c;继承可以分为单继承、多继承和多层继承。单继承 继承语法多继承 语法格式使用多继承时需要注意以下事项Python中的MRO新式类和旧式&#xff08;经典&#xff09;类 进阶案例 在Python中&#xff0c;继承可以分为单继承、多继承和多层继承。 单…...

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

二、编写第一个 Spring MVC 程序（总结项目报 404 问题以及 Spring MVC 的执行流程）

文章目录 一、编写第一个 Spring MVC 程序二、项目运行时报 404错误原因总结三、Spring MVC 的执行流程 一、编写第一个 Spring MVC 程序 创建 maven 项目&#xff0c;以此项目为父项目&#xff0c;在父项目的 pom.xml 中导入相关依赖 <dependencies><dependency…...

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

okhttp源码简单流程分析

拦截器详细解析可以看大佬简书 "https://www.jianshu.com/p/6fac73f7570f"和 “https://www.jianshu.com/p/3c740829475c” okhttp请求流程 1&#xff1a;OkHttpClient okHttpClient new OkHttpClient.Builder() 构建一个okhttpClient对象&#xff0c;传入你想传入的…...

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

SpringBoot整合Shiro实现登录认证，鉴权授权

文章目录 前言一、shiro简介二、环境搭建2.1.数据库2.1.1user用户表2.1.2user_role用户角色关系表2.1.3role角色表2.1.4role_permission角色权限关系表2.1.5permission权限表 2.2导坐标2.3实体类2.3.1User2.3.2Role2.3.3Permission 2.4MVC三层2.4.1User2.4.1.1mapper层2.4.1.2s…...

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

Airbnb开源数据可视化工具Visx

一、什么是visx visx 是用于 React 的富有表现力的底层可视化组件集合，结合了 d3 的强大功能来生成可视化，以及 React 更新 DOM 的诸多优势。 在 Airbnb 内部，visx 的目标是统一整个公司的可视化堆栈，在此过程中，创建了 visx 项目，从而有效的将 D3 的强大功能与 React …...

编程日记 2023/8/18 17:09:13

VR仿真实训系统编辑平台赋予老师更多自由和灵活性

为了降低院校教师在VR虚拟现实方面应用的门槛&#xff0c;VR公司深圳华锐视点融合多年的VR虚拟仿真实训系统制作经验&#xff0c;制作了VR动物课件编辑器&#xff0c;正在逐渐受到师生们的关注和应用。 简单来说&#xff0c;VR畜牧专业课件编辑器是一种可以制作虚拟现实动物教学…...

编程日记 2023/8/18 17:08:12

父类对象转成子类对象

import org.springframework.beans.BeanUtils; import java.util.ArrayList; import java.util.List; public class Test {public static void main(String[] args) {List<B> bList new ArrayList<>();B b new B("a","这是a","b",…...

编程日记 2023/8/18 17:07:11

Spring Boot中如何使用Flyway进行数据库迁移

在本文中&#xff0c;我们将了解如何使用 Flyway 来管理 Spring Boot 应用程序中的 SQL 数据库架构。 在本文中&#xff0c;我们将了解如何使用 Flyway 来管理Spring Boot应用程序中的SQL 数据库架构。 Flyway是一个数据库迁移工具&#xff0c;它提供迁移历史和回滚的功能&…...

编程日记 2023/8/18 17:06:10

web在线编辑器（vue版）

目录 前言一、monaco-editor1、源码2、体积优化 二、ace-editor&#xff1f;1、源码2、体积优化 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多…...

编程日记 2023/8/18 17:05:08