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

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

news 2025/11/2 15:00:18

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

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/10/24 16:29:44

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/1 23:39:16

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/11/1 22:37:20

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/10/25 12:05:20

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/10/26 12:46:24

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/10/2 18:05:53

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/11/2 8:55:38