使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)
拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒
首先可能想到就是
setInterval
let count = 60
setInterval(() => {
count --;
}, 1000)
还有一种就是 setTImeout + 函数的递归调用
let count = 60
function coundown() {
count --;
if(count > 0) {
setTimeout(() => {
countdown()
}, 1000)
}
}
可能很容易忽视这玩意 觉得可能就是做动画用的
其实也可以用作倒计时的使用
下面举一个简单的例子
let rafId; // 标识动画的id
const endTime = Date.now() + 20 * 1000 // 加上20秒 // 结束时间
function step(timestamp) {
const diff = endTime - Date.now()
if(diff > 0) {
console.log(Math.floor(diff / 1000))
rafId = window.requestAnimationFrame(step)
}
}
window.requestAnimationFrame(step)
这东西 就是实现了简易版本的倒计时了 从实现上看 和 上面的两种其实差距不太大哈
但重点就是这玩意 可以暂停 能暂停
这里也可以吐槽下 那个Promise函数 这玩意有一点不好的就是 一旦运行必须给个结果 不能取消 中途不能取消
// 如果中途能取消的话 就很好了
window.cancelAnimationFrame(rafId)
当然实际效果 根据你自己想法来,想用啥 用啥 不用刻意去非得去用哪一个,能把任务搞定就行!
相关文章:
使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)
拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒 首先可能想到就是 setInterval let count 60 setInterval(() > { count --; }, 1000) 还有一种就是 setTImeout 函数的递归调用 let count 60 function coundown() { count --; if(count >…...
jenkins通过sshPut传输文件的时候,报错Permission denied的SftpException
一、背景 使用jenkins的ssh插件传输文件至远程机器的指定目录,php程序打包后,经过zip压缩为oms.zip zip -rq oms.zip ./ -x .git/* -x .env然后我们求md5值 md5sum oms.zip最后执行传输。 09:03:02 Executing command on ssh[116.61.10.149]: mkdir…...
【Python】数据分析+数据挖掘——探索Pandas中的数据筛选
1. 前言 当涉及数据处理和分析时,Pandas是Python编程语言中最强大、灵活且广泛使用的工具之一。Pandas提供了丰富的功能和方法,使得数据的选择、筛选和处理变得简单而高效。在本博客中,我们将重点介绍Pandas中数据筛选的关键知识点ÿ…...
[数据集][目标检测]天牛数据集目标检测数据集VOC格式3050张
数据集格式:Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件,仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数):3050 标注数量(xml文件个数):3050 标注类别数:1 标注类别名称:["longicorn"] …...
python_day16_设计模式
“”“单例模式”“” “”“工厂模式”“” class Person:passclass Worker(Person):passclass Student(Person):passclass Teacher(Person):passclass Factory:def get_person(self, p_type):if p_type w:return Worker()elif p_type s:return Student()else:return Te…...
uniapp开发小程序-实现中间凸起的 tabbar
一、效果展示: 二、代码实现: 1.首先在pages.json文件中进行tabbar的样式和列表配置,代码如下: {"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/p…...
Vue引入与Vue拦截原理
1. vue引入 第一种方法:在线引入 <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 第二种方法:本地引入 2. Vue拦截原理——例题 el用于绑定id,data用于定义数据如下例题 <!DOCTYPE html&…...
2023年电赛---运动目标控制与自动追踪系统(E题)OpenMV方案
前言 (1)废话少说,很多人可能无法访问GitHub,所以我直接贴出可能要用的代码。此博客还会进行更新,先贴教程和代码 (2)视频教程: https://singtown.com/learn/49603/ (3&a…...
6G内存运行Llama2-Chinese-7B-chat模型
6G内存运行Llama2-Chinese-7B-chat模型 Llama2-Chinese中文社区 第一步: 从huggingface下载 Llama2-Chinese-7b-Chat-GGML模型放到本地的某一目录。 第二步: 执行python程序 git clone https://github.com/Rayrtfr/llama2-webui.gitcd llama2-web…...
项目经理必备-项目总体计划模板-制式文件,可直接填写使用-公司可用
合同中完整项目名称,黑体,28号字, 居中对齐,项目名称较长时换行填写 当前文档名称,黑体,小初, 居中对齐,文档名称较长时 换行填写 版 本 号 x.x 编制人 日期 20xx年xx月xx日…...
正则表达式系列|(以xx开头xx结尾提取、切分、替换)
正则表达式系列|(以xx开头xx结尾提取、切分、替换) 文章目录 正则表达式系列|(以xx开头xx结尾提取、切分、替换)[TOC] 前言一、以xx开头xx结尾进行数据处理?1.以xx开头xx结尾对文本拆分2.以xx开头xx结尾提取内容3.以xx…...
金融学复习博迪(第1-5章)
第一部分 金融和金融体系 第1章 金融学 金融:资金的流通,即储蓄,信贷、汇兑、股票和证券交易等经济活动的总称。 金融学:研究货币流通的学问。 传统的金融学研究领域大致有两个方向: >宏观层面的金融市场运行理论…...
【前端知识】React 基础巩固(三十七)——自定义connect高阶组件
React 基础巩固(三十七)——自定义connect高阶组件 一、手撸一个自定义connect高阶组件 import { PureComponent } from "react"; import store from "../store";/*** connect的参数:* 参数一: 函数* 参数二: 函数* 返…...
前端PDF导出,使用html2Canvas和jsPDF插件
import html2Canvas from "html2canvas"; import jsPDF from "jspdf"; export function downloadPDF(dom, filename) {const scale 2;window.pageYOffset 0;// 滚动到顶部,避免打印不全document.documentElement.scrollTop 0;document.body.…...
Android 设备兼容性使用详解
和你一起终身学习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一、设备兼容性分类二、硬件设备兼容三、软件 APP 兼容四、兼容不同语言五、兼容不同分辨率六、兼容不同屏幕方向布局七、兼容不同硬件 Feature八、兼容…...
vnc加固
0x00 认识VNC 先我们看看VNC运行的工作流程: VNC客户端通过浏览器或VNC Viewer连接至VNC Server; VNC Server传送一个对话窗口至客户端,要求输入连接密码(可能为空),以及存取的VNC Server显示装置&#…...
Windows下Nginx安装与配置教程
一、前言 1、Nginx是什么? Nginx是一个开源的Web服务器,同时Nginx也提供了反向代理和负载均衡的功能。 Nginx通常作为负载均衡器暴露在外网接受用户请求,同时也使用其反向代理的功能,将用户的请求转发到实际提供服务的内网服务器…...
Iterator迭代器和Generator生成器
Iterator迭代器和for/of循环原理 Iterator迭代器规范 自己创建一个Iterator类,来实现ES6中的迭代器规范: class Iterator {constructor(assemble) {// assemble:需要迭代的数据结构this.assemble = assemble// index:记录迭代的次数(或者索引)this.index = -1}// 必须具…...
Modbus-RTU协议C#实现
1、安装依赖包 System.IO.Ports 2、读协议 /// <summary>/// Modbus-RTU协议读实例/// </summary>private static void Read(){//组装一个请求报文// 01 03 00 00 00 0A C5 CDbyte slave 0x01;//byte function 0x03; //读单个寄存器byte function 0x01; //…...
Redis学习---大数据技术之Redis(NoSQL简介、Redis简介、Redis安装、五大数据类型、相关配置、持久化)
星光下的赶路人star的个人主页 毅力是永久的享受 文章目录 1、NoSQL1.1 NoSQL数据库1.1.1 NoSQL是什么1.1.2 NoSQL的特点1.1.3 NoSQL的适用场景1.1.4 NoSQL的不适场景 1.2 NoSQL家族 2、Redis简介2.1 Redis官网2.2 Redis是什么2.3 Redis的应用场景2.3.1 配合关系型数据库做高速…...
从代码到部署:手把手复现CenterPoint(PyTorch版)在KITTI数据集上的完整流程
从零实现CenterPoint:KITTI数据集3D目标检测全流程实战指南 为什么选择CenterPoint进行3D目标检测? 在自动驾驶和机器人感知领域,3D目标检测一直是核心技术难题。传统基于锚框(Anchor-based)的方法在处理旋转物体时表现…...
2026年实测10款降AI工具:毕业论文降AIGC哪款最靠谱?
2026年毕业季临近,降低论文AI生成痕迹、通过学校AIGC检测已经成为所有毕业生的必过关卡。但当前降AI工具市场鱼龙混杂:不少用户花了高价处理,AI率却纹丝不动;还有的工具改完的论文语句生硬、逻辑混乱,反而过不了答辩。…...
Phi-4-reasoning-vision-15B快速上手:使用Postman完成图像问答API全流程调试
Phi-4-reasoning-vision-15B快速上手:使用Postman完成图像问答API全流程调试 1. 引言:认识视觉推理模型 Phi-4-reasoning-vision-15B是微软推出的新一代视觉多模态推理模型,它能像人类一样理解图片内容并进行智能问答。想象一下,…...
OpCore-Simplify:三步解决黑苹果配置难题的零代码自动化工具
OpCore-Simplify:三步解决黑苹果配置难题的零代码自动化工具 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 问题诊断:黑苹果配…...
Ostrakon-VL扫描终端部署:支持HTTPS与Basic Auth安全访问
Ostrakon-VL扫描终端部署:支持HTTPS与Basic Auth安全访问 1. 项目概述 Ostrakon-VL扫描终端是一款基于Ostrakon-VL-8B多模态大模型开发的Web交互应用,专为零售与餐饮行业场景优化设计。与传统工业级UI不同,该终端采用高饱和度的像素艺术风格…...
Java工业协议解析必须掌握的3种字节序处理范式,附ISO/IEC 61131-3兼容性验证报告
第一章:Java工业协议解析必须掌握的3种字节序处理范式,附ISO/IEC 61131-3兼容性验证报告大端序(Big-Endian)的标准化解析实践 在Modbus TCP与IEC 61850 ACSI通信中,设备寄存器默认采用网络字节序(即大端序&…...
告别手动!用Python+GDAL批量处理GlobeLand30影像:下载、去黑边、镶嵌裁剪全自动
用PythonGDAL打造GlobeLand30全自动处理流水线 遥感影像处理一直是地理信息科学领域的核心工作之一。对于需要处理大范围GlobeLand30数据的科研人员和开发者来说,传统的手动操作不仅效率低下,还容易引入人为错误。想象一下,当你需要处理覆盖整…...
GLM-4.1V-9B-Base部署教程:NVIDIA驱动版本兼容性验证与降级方案
GLM-4.1V-9B-Base部署教程:NVIDIA驱动版本兼容性验证与降级方案 1. 模型概述 GLM-4.1V-9B-Base是智谱开源的一款视觉多模态理解模型,专注于图像内容识别与分析任务。该模型具备以下核心能力: 图片内容描述与场景理解图像主体识别与定位颜色…...
YOLO26涨点改进| CVPR 2026 | 独家创新首发、注意力改进篇| 引入SDGW空间偏差引导加权模块,含多种二次创新改进,助力图像去噪、红外小目标检测、图像分割、变换检测、关键点检测高效涨点
一、本文介绍 🔥本文给大家介绍使用 SDGW空间偏差引导加权模块 改进YOLO26网络模型,可以在空间域对每个像素位置进行自适应加权,动态增强目标信号、抑制噪声,使网络在特征提取阶段对低亮度、小目标或高噪声区域更加敏感,从而提升检测精度和召回率,同时减少假阳性。该模…...
AI读脸术多国面孔适配:跨种族识别优化部署实战
AI读脸术多国面孔适配:跨种族识别优化部署实战 1. 引言 你有没有遇到过这样的情况:一个在亚洲人脸识别上表现不错的AI模型,拿到一张欧洲人或非洲人的照片时,识别结果就开始"犯迷糊"了?性别判断出错&#x…...
