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

javaScript:快乐学习计时器

news 2026/2/9 8:30:47

目录

一.前言

二.计时器

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/11/12 9:47:25

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

编程新知 2026/2/2 21:52:42