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

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

news 2026/2/9 12:53:01

• 定时器函数介绍

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

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


• 定时器函数基本使用

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

  • 开启定时器

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

 

  • 关闭定时器 

 

案例：

案例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-定时器-间歇函数(一)

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

编程日记 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脚本工具集

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

编程日记 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&#xff0c;本节我们来看看如何使用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

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

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

uniapp 实现tabBar-switchTab之间的传参

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

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

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

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

编程日记 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统计）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

智能合约笔记

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

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

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

Razor Pad是一个编辑Razor脚本的工具&#xff0c;脱离于ASP.NET 和Visual Studio。 github地址&#xff1a;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前期准备与快速上手

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

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

Java、C#、Python间的Battle

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

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

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/8 4:37:34

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2026/1/29 11:06:33

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2026/2/6 14:22:43

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

编程新知 2025/11/3 8:29:51

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

编程新知 2025/9/17 10:04:40

比特币：固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...

编程新知 2025/12/11 5:48:20