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

css计时器 animation实现计时器延时器

news 2026/3/27 10:33:58

css计时器 animation实现计时器延时器

缺点当切页面导航会休眠不执行

最初需求是一个列表每个项目都有各自的失效时间 然后就想到 计时器延时器轮询等方案 这些方案每一个都要有自己的计时器 感觉不是很好 轮询也占资源 然后突发奇想 css能不能实现 开始想到的是transition测试结果限制太大 然后就想到了动画 可以设置动画的执行时间 重复次数 延迟执行等 这些和计时器延时器类似 然后就去找js的监听事件 发现有监听动画的事件 经过测试 发现还可以

以下为测试的demo  动画的事件可以随意更改 如color width transform 看自己的需求

可以将 animation-delay放到style中 实现每个元素独立的延时器效果

vue框架

<template><div class="box"><!-- 使用v-bind动态添加样式 --><div class="move" :style="{ animationDelay: '5s' }" @animationend="onDelayEnd"@webkitAnimationEnd="onDelayEnd"><div class="no"></div><div class="off"></div></div><div class="box"><div class="move2"@animationiteration="onIntervalIteration"@webkitAnimationIteration="onIntervalIteration"><div class="no"></div><div class="off"></div></div></div></div>
</template><script>
export default {data() {return {delayCount: 0,intervalCount: 0,};},methods: {onDelayEnd() {console.log('延时器 setTimeout');// 在此处可以添加延时器结束后的处理逻辑},onIntervalIteration() {this.intervalCount++;console.log('计时器 setInterval ' + this.intervalCount);// 在此处可以添加计时器每次迭代时的处理逻辑},},
};
</script><style scoped>
.box {width: 50px;height: 50px;margin: 0 auto;border: 2px solid #ccc;overflow: hidden;
}.move,
.move2 {position: relative;width: 100px;height: 50px;display: flex;justify-content: flex-start;
}.move {animation-name: move;animation-duration: 0;animation-fill-mode: forwards;
}.move2 {animation-name: move2;animation-duration: 1s;animation-iteration-count: infinite;
}.no,
.off {width: 50%;height: 50px;
}.no {background: gold;
}.off {background: black;
}@keyframes move {from {left: 0;}to {left: -50px;}
}@keyframes move2 {from {left: 0;}to {left: -50px;}
}
</style>

原生js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {width: 50px;height: 50px;margin: 0 auto;border: 2px solid #ccc;overflow: hidden;}.move2,.move {position: relative;width: 100px;height: 50px;display: flex;justify-content: flex-start;}.move {animation-name: move;animation-duration: 0;animation-fill-mode: forwards;}.move2 {animation-name: move2;animation-duration: 1s;animation-iteration-count: infinite;}.off,.no {width: 50%;height: 50px;}.no {background: gold;}.off {background: black;}@keyframes move {from {left: 0}to {left: -50px}}@keyframes move2 {from {left: 0}to {left: -50px}}</style></head><body><div class="box">
<!--  style="animation-delay: 5s" 写到行内是因为可以动态添加 --><div class="move" style="animation-delay: 5s"><div class="no"></div><div class="off"></div></div></div><div class="box"><div class="move2"><div class="no"></div><div class="off"></div></div></div></body><script type="text/javascript">document.getElementsByClassName('move')[0].addEventListener('animationend', function() {console.log('延时器 setTimeout')});let count = 0// let timer = setInterval(() => {// 	console.log(++count)// }, 1000)document.getElementsByClassName('move2')[0].addEventListener('animationiteration', function() {console.log('计时器 setInterval '+ ++count)// clearInterval(timer)// count = 0// timer = setInterval(() => {// 	console.log(++count)// }, 1000)});</script>
</html>

相关文章：

css计时器 animation实现计时器延时器

css计时器 animation实现计时器延时器 缺点当切页面导航会休眠不执行 最初需求是一个列表每个项目都有各自的失效时间 然后就想到 计时器延时器轮询等方案 这些方案每一个都要有自己的计时器 感觉不是很好 轮询也占资源 然后突发奇想 css能不能实现 开始想到的是transition测…...

编程日记 2024/1/9 5:29:56

【win11 绕过TPM CPU硬件限制安装】

Qt编程指南 VX&#xff1a;hao541022348 ■ 下载iso文件■ 右键文件点击装载出现如下问题■ 绕过TPM CPU硬件限制安装方法■ 虚拟机安装win11 ■ 下载iso文件 选择Windows11 &#xff08;multi-edition ISO&#xff09;在选择中文 ■ 右键文件点击装载出现如下问题 ■ 绕过T…...

编程日记 2024/1/9 5:28:55

k8s的yaml文件中的kind类型都有哪些？（清单版本）

在操作kubernetes的过程中&#xff0c;我们接触到的yaml文件中的kind类型有很多。他们代表了kubernetes的不同类型的对象&#xff0c;了解了kind的类型&#xff0c;也就相当于了解了k8s都有哪些类型的对象。 类型清单及概要说明 序号类型简述1Pod一个Kubernetes中最基本的资源…...

编程日记 2024/1/9 5:25:51

Jetpack Room使用

Room使用 回顾 数据库有多张表&#xff0c;一张表只能记录一种Class&#xff0c;Class的具体属性是这个表的列&#xff1b;所有对表的操作都要通过Dao来访问 注解说明&#xff1a; Enity 作用于Class上&#xff0c;表示创建一张表记录该Class&#xff0c;Class内部属性使用…...

编程日记 2024/1/9 5:24:50

HarmonyOS应用开发之ArkTS语言学习记录

1、ArkTS介绍 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风格的基础上&#xff0c;对TS的动态类型特性施加更严格的约束&#xff0c;引入静态类型。同时&#xff0c;提供了声明式UI、状态管理等相应的能力&#xff0c;让开发者…...

编程日记 2024/1/9 5:23:49

windows 下 mongodb6.0 导入导出json文件

1.运行cmd窗口&#xff0c;进入MongoDB安装路径下的bin文件下&#xff0c;输入以下命令导入数据文件 mongoimport --host 127.0.0.1 --port 27017 --db <数据库名称&#xff0c;根据自个情况> -c <集合名称&#xff0c;自定义> --file <导入文件的路径名> …...

编程日记 2024/1/9 5:22:48

如何给 unplugin-vue-components/vite 写一个简单的 resolver

大部分工作 unplugin-vue-components 都已经处理好了, 我们只需要接收组件名来判断是否是自己的组件, 然后处理对应的导入逻辑。 一共 3 个字段 as 重命名类似 import { componentNameReName } from ‘xxxx’name 组件名 import { componentName } from ‘xxxx’from 导入路径…...

编程日记 2024/1/9 5:21:47

MYSQL篇--索引高频面试题

mysql索引 1什么是索引&#xff1f; 索引说白了就是一种数据结构&#xff0c;可以协助快速查询数据&#xff0c;以及更新数据库表中的数据&#xff0c;更通俗的来说索引其实就是目录&#xff0c;通过对数据建立索引形成目录&#xff0c;便于去查询数据&#xff0c;而mysql索引…...

编程日记 2024/1/9 5:20:46

视频号小店怎么上架商品？实操分享，干货满满！

我是电商珠珠 视频号小店从22年7月到现在也不过才发展了一年&#xff0c;它的风口才刚刚开始。 平台为了吸引商家入驻&#xff0c;会将大量红利向商家倾斜&#xff0c;只要把握住风口&#xff0c;就会很快起飞。 视频号小店对于很多人来说&#xff0c;都是新平台&#xff0c…...

编程日记 2024/1/9 5:18:45

Python 常用数据类型

Python 常用数据类型有以下这些&#xff1a; 数据类型中文解析例子int整数&#xff0c;表示整数值1、2float浮点数&#xff0c;表示带有小数点的数值3.14、2.718complex复数&#xff0c;表示实部和虚部组成的复数12j、3-4jstr字符串&#xff0c;表示文本数据&#xff0c;用引号…...

编程日记 2024/1/9 5:16:43

基于yolov2深度学习网络的车辆行人检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .......................................................... load yolov2.mat% 加载训练好的…...

编程日记 2024/1/9 5:15:42

【QT】中英文切换

很高兴在雪易的CSDN遇见你 前言 本文分享QT中如何进行中英文切换&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易会继续努力分享&#xff0c;一起进步&#xff01; 你的点赞就是我的动力(&#xff3e;&#xff35;&#xff3e…...

编程日记 2024/1/9 5:14:41

vue实现代码编辑器,无坑使用CodeMirror

vue实现代码编辑器,无坑使用CodeMirror vue实现代码编辑器,使用codemirror5 坑&#xff1a;本打算cv一下网上的&#xff0c;结果发现网上的博客教程都是错的&#xff0c;而且博客已经是几年前的了&#xff0c;我重新看了github上的&#xff0c;发现安装的命令都已经不一样了。我…...

编程日记 2024/1/9 5:11:39

MR实战：网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…...

编程日记 2024/1/9 5:10:37

linux 内核编译安装

一、配置 默认配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- omap2plus_defconfig原配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- oldconfig 重新配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- menuconfig二 kernel zImage make ARCHarm CRO…...

编程日记 2024/1/9 5:09:36

hash基础知识（算法村第五关青铜挑战）

一、Hash的概念和基本特征 哈希(Hash)也称为散列&#xff0c;就是把任意长度的输入&#xff0c;通过散列算法&#xff0c;变换成固定长度的输出&#xff0c;这个输出值就是散列值。 二、碰撞处理方法(2种) 在上面的例子中&#xff0c;我们发现有些在Hsh中很多位置可能要存两个甚…...

编程日记 2024/1/9 5:07:35

Linux第8步_USB设置

学习完设置“虚拟机的电源”后&#xff0c;接着学习通过鼠标点击操作U盘&#xff0c;目的是了解USB设置。 1、在桌面&#xff0c;双击“VMware Workstation Pro”图标&#xff0c;得到下图&#xff1a; 2、点击“编辑虚拟机”&#xff0c;得到下图&#xff1a; 只要点击编辑虚…...

编程日记 2024/1/9 5:05:33

第五节 强制规范commit提交 .husky/commit-msg: no-such file or directory问题解决办法

系列文章目录 目录 系列文章目录 前言 操作方法 总结 前言 在每次Git提交时，强制严格执行制定的规范。 操作方法 npm 安装commitlist 进行校验 npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12...

编程日记 2024/1/9 5:04:32

2024年了，难道还不会使用谷歌DevTools么？

我相信您一定对Chrome浏览器非常熟悉，因为它是前端开发者最亲密的伙伴。我们可以使用它查看网络请求、分析网页性能以及调试最新的JavaScript功能。 除此之外，它还提供了许多功能强大但不常见的功能，这些功能可以大大提高我们的开发效率。 让我们来看看。 1. 重新发送XHR…...

编程日记 2024/1/9 5:03:31

springboot(ssm生产管理ERP系统 wms出入库管理系统Java系统

springboot(ssm生产管理ERP系统 wms出入库管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09;…...

编程日记 2024/1/9 5:01:29

使用Dependency Check命令行工具高效检测Java项目中的安全漏洞

1. 为什么Java开发者需要关注依赖库安全&#xff1f; 如果你是一名Java开发者&#xff0c;可能经常遇到这样的情况&#xff1a;项目运行得好好的&#xff0c;突然某天系统被入侵了&#xff0c;排查半天才发现是某个第三方库存在安全漏洞。这种情况在现实开发中并不少见&#xf…...

编程新知 2026/3/27 10:25:43

矩阵按键的硬件设计与软件扫描实战

1. 矩阵按键的硬件设计要点 第一次接触矩阵按键时&#xff0c;我完全被它节省IO口的设计惊艳到了。想象一下&#xff0c;16个独立按键原本需要16个IO口&#xff0c;而4x4矩阵按键只需要8个IO口就能搞定。这种设计在资源受限的单片机项目中简直就是救命稻草。 硬件连接上有个容易…...

编程新知 2026/3/27 9:27:03

AudioSeal效果展示：实测音频隐形水印，听不出区别但能精准检测

AudioSeal效果展示&#xff1a;实测音频隐形水印&#xff0c;听不出区别但能精准检测 1. 音频水印技术概述 1.1 什么是音频隐形水印 音频隐形水印是一种将数字标识信息嵌入到音频信号中的技术&#xff0c;这些信息对人类听觉系统几乎不可感知&#xff0c;但可以通过专用算法…...

编程新知 2026/3/27 8:58:47

一篇搞定2026年律所管理系统选购，避坑技巧+优质品牌全解析

据智研咨询2026年发布的《中国律所管理软件行业发展报告》显示&#xff0c;国内律所对管理系统的需求年增长率达28%&#xff0c;但近70%的律所表示选型后存在功能冗余、操作复杂、适配性差等问题&#xff0c;不仅未能提升效率&#xff0c;反而增加了办公成本。作为深耕律所管理…...

编程新知 2026/3/27 8:00:21

Keil5主题配色进阶：不只是好看，更要好用！详解如何区分函数、变量、宏定义的颜色

Keil5主题配色进阶&#xff1a;不只是好看&#xff0c;更要好用&#xff01;详解如何区分函数、变量、宏定义的颜色 作为一名嵌入式开发者&#xff0c;每天面对Keil5的默认编辑器界面&#xff0c;你是否也感到视觉疲劳&#xff1f;那些单调的配色不仅影响编码心情&#xff0c;更…...

编程新知 2026/3/27 7:01:26

[OS] 非阻塞键盘输入检测（kbhit）在实时交互应用中的实现与优化

1. 为什么需要非阻塞键盘输入检测&#xff1f; 想象一下你在玩一个简单的终端游戏&#xff0c;比如贪吃蛇。如果游戏在每次等待你按键时都暂停执行&#xff0c;直到你按下某个键才继续&#xff0c;那体验会有多糟糕&#xff1f;这就是阻塞式输入的问题——程序会卡在输入等待环…...

编程新知 2026/3/27 6:47:22

基于Vue的沧交食堂食品监管系统[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;本文阐述了一个基于Vue框架开发的沧交食堂食品监管系统。该系统旨在借助现代Web技术&#xff0c;强化对沧交食堂食品安全的监管力度&#xff0c;提升监管效率与质量。系统涵盖了系统用户管理、新闻数据管理、食品相关业务管理以及评论管理等多方面功能。文章详…...

编程新知 2026/3/27 6:29:17

Maccy剪贴板管理器：彻底改变你的macOS复制粘贴体验

Maccy剪贴板管理器&#xff1a;彻底改变你的macOS复制粘贴体验 【免费下载链接】Maccy Lightweight clipboard manager for macOS 项目地址: https://gitcode.com/gh_mirrors/ma/Maccy Maccy是一款专为macOS设计的轻量级剪贴板管理器&#xff0c;它彻底改变了你的复制粘…...

编程新知 2026/3/27 5:08:41

算法 POJ1029

一&#xff0e;题目大意假币描述“金条”银行从可靠来源收到的信息&#xff0c;在他们最后一组的 N 枚硬币中&#xff0c;恰好有一枚硬币是假的&#xff0c;并且重量与其他硬币不同&#xff08;而所有其他硬币的重量都相同&#xff09;。经济危机之后&#xff0c;他们只有一个简…...

编程新知 2026/3/27 4:54:16

OpenClaw+百川2-13B：个人知识库自动整理与问答系统搭建

OpenClaw百川2-13B&#xff1a;个人知识库自动整理与问答系统搭建 1. 为什么需要本地化知识管理系统 去年整理博士论文资料时&#xff0c;我遇到了一个典型的研究者困境&#xff1a;电脑里堆积了237个PDF、643篇网页存档和无数零散的笔记片段&#xff0c;但需要引用某个概念时…...

编程新知 2026/3/27 4:11:40