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

javaScript:快乐学习计时器

news 2025/11/7 0:34:13

目录

一.前言

二.计时器

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

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/11/1 2:29:10

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/4 7:17:15

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/11/4 19:17:54

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/10/31 12:22:39

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/10/27 11:18:20

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2025/11/1 22:28:44

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

编程新知 2025/9/15 15:07:19