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

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

news 2026/2/9 23:29:02

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15