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

JS-定时器-间歇函数(一)

news 2026/5/23 9:26:50

• 定时器函数介绍

定时器函数在开发中的使用场景

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数

• 定时器函数基本使用

定时器函数可以开启和关闭定时器

开启定时器

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒

关闭定时器

案例：

案例1：阅读注册协议

需求：按钮60秒之后才可以使用
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑

秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器里面文字变为同意最后按钮可以点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(60)</button><script>//1 获取按钮对象const btn = document.querySelector('.btn')//2 开始定时器let i = 5let itv = setInterval(function () {btn.innerHTML = `我已经阅读用户协议(${--i})`// 3 停止定时器if (i === 0) {clearInterval(itv)btn.disabled = false}}, 1000)</script>
</body></html>

案例2：轮播图定时变换图片

需求：每隔一秒钟切换一个图片
分析：
①：准备一个数组对象，里面包含详细信息（素材包含）
②：获取元素
③：设置定时器函数
设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨）
如果图片播放到最后一张，就是大于等于数组的长度
则把变量重置为0

<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]//开始定时器 let i = 0setInterval(function () {//2 获取图片对象const img = document.querySelector('.slider-wrapper img')// 修改对象的src属性   图片对象的src属性 === 数组随机对象中的url属性img.src = sliderData[i].url//3 获取p对象const p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[i].title//4 获取li对象，并移除其他的active属性（循环方式）// const list = document.querySelectorAll(`.slider-indicator li`)// for(let i = 0;i<list.length;i++){//   list[i].classList.remove('active')// }//排他思想的方式document.querySelector('.slider-indicator .active').classList.remove('active')const li = document.querySelector(`.slider-indicator li:nth-child(${i + 1})`)li.classList.add('active')i++console.log(i)if(i === 8){//如果i=8时（最后一张图片），将i重置为0i = 0}}, 1500)// //1 生成一个随机数// let random = parseInt(Math.random()*sliderData.length)// //2 获取图片对象// const img = document.querySelector('.slider-wrapper img')// // 修改对象的src属性   图片对象的src属性 === 数组随机对象中的url属性// img.src = sliderData[random].url// //3 获取p对象// const p = document.querySelector('.slider-footer p')// p.innerHTML = sliderData[random].title// //4 获取li对象，并修改css// const li = document.querySelector(`.slider-indicator li:nth-child(${random+1})`)// li.classList.add('active')</script>
</body></html>

案例3：电子时钟

要求：在网页上显示一个时钟，秒针，分针。时针可以旋转

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {position: relative;width: 600px;height: 600px;margin: 100px auto;background: url(./images/clock.jpg) no-repeat;}.hour,.minute,.second {width: 30px;height: 600px;}.hour {position: absolute;left: 50%;margin-left: -15px;background: url(./images/hour.png);}.minute {position: absolute;left: 50%;margin-left: -15px;background: url(./images/minute.png);transform: rotate(270deg);}.second {position: absolute;left: 50%;margin-left: -15px;background: url(./images/second.png);transform: rotate(60deg);}.rotate6 {transform: rotate(6deg);}</style>
</head><body><div class="main"><div class="hour"></div><div class="minute"></div><div class="second"></div></div><script>let deg = 0let conut = 0//定时器var mynow = new Date();//默认的获取的是当前时间//通过调用日期对象的方法来重新获取当前的日期时间let hourTime = mynow.getHours();//获取小时let minuteTime = mynow.getMinutes();//获取分钟let secondTime = mynow.getSeconds();//获取秒const second = document.querySelector('.second')second.style.transform = `rotate(${secondTime * 6}deg)`const minute = document.querySelector('.minute')minute.style.transform = `rotate(${minuteTime * 6}deg)`const hour = document.querySelector('.hour')hour.style.transform = `rotate(${hourTime * 30}deg)`setInterval(function () {//1 每过一秒钟，秒针旋转6度// 1.1获取秒针元素deg += 6const second = document.querySelector('.second')second.style.transform = `rotate(${deg}deg)`if (deg >= 360) {deg = 0//2 秒针转一圈===分针转6度const minute = document.querySelector('.minute')conut++if (minuteTime >= 60) {minuteTime = 1}else{minuteTime++}minute.style.transform = `rotate(${minuteTime * 6}deg)`}// 3时针转动if (minuteTime === 60) {if (hourTime >= 12) {hourTime = 1} else {hourTime++}const hour = document.querySelector('.hour')hour.style.transform = `rotate(${hourTime * 30}deg)`}}, 1000)</script>
</body></html>

JS-定时器-间歇函数(一)

• 定时器函数介绍定时器函数在开发中的使用场景网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发例如：网页中的倒计时要实现这种需求，需要定时器函数定时器函数有两种，今天我先讲…...

编程日记 2024/1/17 11:43:59

AttributeError: module ‘openai‘ has no attribute ‘error‘解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2024/1/17 11:41:56

每日一记：一个windows的bat脚本工具集

最近在工作上遇到要校验文件的问题，例如，下载了一个文件之后，通过查看文件的md5来校验文件是否完整，这个动作在linux上很简单，但在windows上也不难，可以通过 certutil 命令实现，该命令通常可用于…...

编程日记 2024/1/17 11:40:55

Apache Zeppelin学习记录2

Apache Zeppelin学习记录2 文章目录 Apache Zeppelin学习记录2前言一、基础调用二、带参数调用1.代码块要增加一行z.textbox("folder_path", "input")2.读取result 总结前言上一章讲了如何使用zeppelin来接入python，本节我们来看看如何使用R…...

编程日记 2024/1/17 11:39:53

[原创][R语言]股票分析实战[11]:读取股票数据文件的细节: 提取目标列数据

[简介] 常用网名: 猪头三出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…...

编程日记 2024/1/17 11:33:47

【kafka】记录用-----------1

主题（topic）：消息的第一次分类根据人为的划分条件将消息分成不同的主题主题的划分是人为的根据不同的任务情景去划分比如，我们有两个主题，一个是"订单"，另一个是"库存"。每个主题代…...

编程日记 2024/1/17 11:32:46

uniapp 实现tabBar-switchTab之间的传参

一、需求： tabbar之间跳转页面时，需要传递一个参数。官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。二、解决方法： 方法1：setStorageSync(本地缓存) //index.vue 页 onclick …...

编程日记 2024/1/17 11:30:43

geemap学习笔记049：下载Landsat数据时遇到的一个问题

前言最近在下载Landsat 8 地面反射率数据（Surface Reflectance）时，遇到了一个问题，无论是使用geemap.ee_export_image_to_drive() 函数还是geemap.download_ee_image() 函数下载的数据，易康都打不开，显示…...

编程日记 2024/1/17 11:28:40

基于pyqt5+scapy 根据ip 具体端口进行扫描的程序

先给出代码 import sysfrom PyQt5 import uic from PyQt5.QtWidgets import *from scapy.all import * import argparse import logging from scapy.layers.inet import IP, TCP from scapy.sendrecv import sr1class MyWindow(QWidget):def __init__(self):super().__init__(…...

编程日记 2024/1/17 11:24:36

Redis：原理速成+项目实战——Redis企业级项目实战终结篇（HyperLogLog实现UV统计）

👨‍🎓作者简介：一位大四、研0学生，正在努力准备大四暑假的实习 🌌上期文章：Redis：原理速成项目实战——Redis实战14（BitMap实现用户签到功能） 📚订阅专栏&am…...

编程日记 2024/1/17 11:23:35

Python的集合set用法介绍与例子

用法简介 Python的集合（set）是一种无序且不重复的元素序列。它类似于列表和元组，但集合中的元素是唯一的，没有重复的值。集合在Python中用于执行一些特定的操作，例如消除重复元素、检查元素是否存在等。下面是一些关…...

编程日记 2024/1/17 11:21:32

服务器感染了.pings勒索病毒，如何确保数据文件完整恢复？

导言： 随着科技的不断进步，网络犯罪也在不断演变。其中之一的.pings勒索病毒是一种危险的恶意软件，它能够加密用户的数据文件，并要求支付赎金以解密这些文件。在本文中，91数据恢复将介绍.pings勒索病毒，以…...

编程日记 2024/1/17 11:20:31

go语言（二）----常量

1、单个常量用const进行定义。 const a int 100 2、多个常量用const（）进行定义。 const （ a 10 b 20 ） 3、iota 与const（）来表示枚举类型 const（ a iota b c ） package mainimp…...

编程日记 2024/1/17 11:19:30

VSC ctrl+鼠标左键点击后，返回原来位置的方法

windows 在使用VSC编写代码时，我们常常用到Ctrl鼠标左键的方式来查看类或变量名的定义声明，看完之后我们想回到程序原来的位置，此时可以通过Alt ←（方向左键）来返回到原来的位置。...

编程日记 2024/1/17 11:17:27

还在为crontab表达式发愁吗，快使用这个工具

是不是每次要定义cron表达式的时候，都去百度翻找资料，cron表达式难写难记真是苦天下程序员久已。有没有什么不拥记的办法就轻松掌握呢？最近发现这个CrontabGuru神器，强烈推荐，真是广大程序员的福音了。简介 Crontab…...

编程日记 2024/1/17 11:13:23

61. Spring事务传播行为实现原理

61. Spring事务传播行为实现原理 Spring的事务信息是存在ThreadLocal中的，所以一个线程永远只能有一个事务融入：当传播行为是融入外部事务则拿到ThreadLocal中的Connection、共享一个数据库连接共同提交、回滚；创建新事务：当传播行为是创建新事务，会将嵌套新事务存入Th…...

编程日记 2024/1/17 11:07:17

智能合约笔记

前言： 首先了解下为什么会出现智能合约，打个比方现在有两个人A和B打赌明天会不会下雨，每个人赌注100元，如果第二天下雨则A拿走200元，否则B拿走200元，这样就有一个问题，赌注要到第二天才能见效&…...

编程日记 2024/1/17 11:06:15

脱离于ASP.NET 和Visual Studio编辑Razor脚本

Razor Pad是一个编辑Razor脚本的工具，脱离于ASP.NET 和Visual Studio。 github地址：GitHub - RazorPad/RazorPad: RazorPad is a quick and simple stand-alone editing environment that allows anyone (even non-developers) to author Razor templat…...

编程日记 2024/1/17 11:01:10

MetaGPT前期准备与快速上手

大家好，MetaGPT 是基于大型语言模型（LLMs）的多智能体协作框架，GitHub star数量已经达到31.3k。接下来我们聊一下快速上手这里写目录标题一、环境搭建1.python 环境2. MetaGpt 下载二、MetaGPT配置1.调用 ChatGPT API 服务2.简…...

编程日记 2024/1/17 10:58:07

Java、C#、Python间的Battle

一、编译原理和开发效率编译速度： C# （约大于等于） JAVA > Python python的编译原理前提：python 3.6 python不会直接编译源码而是把源码直接扔给解释器，这种方式使得python非常灵活，让它的开发效…...

编程日记 2024/1/17 10:57:06

Jenga框架双引擎设计：视频生成效率优化解析

1. Jenga框架核心设计解析Jenga视频生成框架的核心创新在于其双引擎设计：渐进式分辨率(ProRes)和动态块稀疏注意力(AttenCarve)。这两种技术协同工作，解决了Transformer架构在视频生成中的计算效率瓶颈。1.1 渐进式分辨率技术(ProRes)ProRes采用分阶段生…...

编程新知 2026/5/23 9:16:22

TaskbarX完整指南：Windows任务栏图标居中与动画特效实战教程

TaskbarX完整指南：Windows任务栏图标居中与动画特效实战教程【免费下载链接】TaskbarX Center Windows taskbar icons with a variety of animations and options. 项目地址: https://gitcode.com/gh_mirrors/ta/TaskbarX TaskbarX是一款专为Windows 10/11设…...

编程新知 2026/5/23 9:05:31

Sunshine游戏串流服务器：打造个人游戏云的终极免费方案

Sunshine游戏串流服务器：打造个人游戏云的终极免费方案【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上畅玩PC游戏吗？Sunshine作为一款开源…...

编程新知 2026/5/23 8:14:07

量子电路优化：GSI方法在NISQ时代的应用

1. 量子电路优化的核心挑战与创新思路在当前的NISQ（Noisy Intermediate-Scale Quantum）时代，量子计算机面临着几个关键瓶颈：量子比特的相干时间有限、门操作存在误差、以及量子比特之间的连接受限。这些硬件限制使得量子电路的深度…...

编程新知 2026/5/23 5:12:34

技术人的英语能力如何影响薪资？数据说话

打开任何一个招聘平台，搜索“软件测试工程师”，你会发现一个越来越普遍的现象。对于那些薪资范围宽、技术描述详尽、公司名号响亮的岗位，末尾往往会附上一句：“英语可作为工作语言”、“英文读写能力优异”、“CET-6以上优先”。这…...

编程新知 2026/5/23 2:43:20

2026年南京Geo公司将有何新动态？一起探寻其发展新方向！

在数字化浪潮汹涌澎湃的当下，AI智能营销领域正经历着前所未有的变革。顺炫科技作为该领域的深耕者，一直致力于为全球客户提供高效、智能的数字化推广解决方案。随着2026年的到来，顺炫科技又将有哪些新动态，其发展新方向又将指向何…...

编程新知 2026/5/23 2:29:53

C51浮点数处理：IEEE-754标准与嵌入式实践

1. C51浮点数范围解析：从原理到实践边界在嵌入式开发领域，浮点数处理一直是硬件资源受限场景下的棘手问题。作为Keil C51编译器（8051架构标准开发工具）的长期使用者，我深刻理解准确掌握浮点数边界值对嵌入式系统稳定性…...

编程新知 2026/5/23 2:00:31

从 0 到 1 搭建 RuoyiOffice：30 分钟跑通后端+前端+移动端

从 0 到 1 搭建 RuoyiOffice：30 分钟跑通后端前端移动端 🌐 演示地址：http://ruoyioffice.com | 📦 源码1：https://gitcode.com/zhouzhongyan/ruoyi-office-vben.git | 📦 源码2：https://gitcod…...

编程新知 2026/5/23 1:58:27