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

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

news 文章来源：https://blog.csdn.net/divpoxiao/article/details/135397386 2024/11/28 6:36:55

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

通过使用别名让 SQL 更简短-数据库教程shulanxt.com-帆软软件有限公司

MySQL视频教程导航 https://www.shulanxt.com/database/mysqlvideo/p1 SQL 别名 SQL 别名 通过使用 SQL&#xff0c;可以为表名称或列名称指定别名。 基本上&#xff0c;创建别名是为了让列名称的可读性更强。 列的 SQL 别名语法 SELECT column_name AS alias_name FROM …...

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

最优化理论分析复习--最优性条件（一）

文章目录 上一篇无约束问题的极值条件约束极值问题的最优性条件基本概念只有不等式约束时 下一篇 上一篇 最优化理论复习–对偶单纯形方法及灵敏度分析 无约束问题的极值条件 由于是拓展到向量空间 R n R^n Rn, 所以可由高数中的极值条件进行类比 一阶必要条件 设函数 f (…...

编程日记 2024/1/9 4:59:27

基于WIFI指纹的室内定位算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1WIFI指纹定位原理 4.2 指纹数据库建立 4.3定位 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…...

编程日记 2024/1/9 4:57:25

密码学：一文读懂非对称密码体制

文章目录 前言非对称密码体制的保密通信模型私钥加密-公钥解密的保密通信模型公钥加密-私钥解密的保密通信模型 复合式的非对称密码系统散列函数数字签名数字签名满足的三个基本要求先加密还是先签名&#xff1f;数字签名成为公钥基础设施以及许多网络安全机制的基础什么是单向…...

编程日记 2024/1/9 4:53:21

2_工厂设计_工厂方法和抽象工厂

工厂设计模式-工厂方法 1.概念 工厂方法模式(Fatory Method Pattern ) 是指定义一个创建对象的接口&#xff0c;但让实现这个接口的类来决定实例化哪个类&#xff0c;工厂方法让类的实例化推迟到子类中进行。 在工厂方法模式中用户只需要关心所需产品对应的工厂&#xff0c;…...

编程日记 2024/1/9 4:52:20

k8s之pod进阶

1.k8s的pod重启策略 Always &#xff1a;不论正常退出还是非正常退出都重启deployment的yaml文件只能是always pod的yaml三种模式都可以。 OnFailure&#xff1a;只有状态码非0才会重启&#xff0c;正常退出不重启 Never&#xff1a;正常退出和非正常退出都不重启 容器的退…...

编程日记 2024/1/9 4:50:19

RTTI（运行时类型识别）

RTTI（运行时类型识别） 实验介绍 RTTI 全称 Run Time Type Identification，中文称为 “运行时类型识别”，在程序中使用 typeid 和 dynamic_cast 实现。RTTI 技术允许程序在运行时识别对象的类型。 知识点 typeiddynamic_castRTTI 技术typeid typeid 是 C++ 关键字，用于…...

编程日记 2024/1/9 4:49:18

19.Linux Shell任务控制

文章目录 Linux Shell任务控制1)信号通过键盘生成信号trap 命令捕获信号 2)在后台运行脚本命令后加 & 符使用nohub命令 3)作业控制4)调度优先级nice命令renice 命令 5)定时运行作业at定期执行命令reference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x…...

编程日记 2024/1/9 4:48:17

域名流量被劫持怎么办？如何避免域名流量劫持？

随着互联网不断发展&#xff0c;流量成为线上世界的巨大财富。然而一种叫做域名流量劫持的网络攻击&#xff0c;将会在不经授权的情况下控制或重定向一个域名的DNS记录&#xff0c;导致用户在访问一个网站时&#xff0c;被引导到另一个不相关的网站&#xff0c;从而劫持走原网站…...

编程日记 2024/1/9 4:46:16

java案例知识点

一.会话技术 概念 技术 二.跨域 三.过滤器 四.拦截器...

编程日记 2024/1/9 4:45:15

局域网创建网站/有趣的软文

出版社链接&#xff1a;http://shop.oreilly.com/product/0636920044765.do 代码链接&#xff1a;https://github.com/oreillymedia/Learning-OpenCV-3_examples 前言&#xff1a; 本书目的&#xff1a;目前&#xff0c;4方面趋势使得图像处理成为一个发展迅速的领域1 人手一手…...

编程日记 2024/11/28 5:57:30

外贸独立网站制作/免费seo推广计划

或许你已经感受到了&#xff0c;大数据和人工智能正在对我们的生活产生影响。在朋友们留言中&#xff0c;不乏有人对未来表达了担忧。你是否对你自己所处的世界洞若观火&#xff1f;如果不是&#xff0c;那么就来听听吴军博士怎么说。计算机在解决各种智能问题上的进步幅度并不…...

编程日记 2024/11/28 3:51:21

仪征做网站公司/购买域名的网站

SQL SERVER 2000 ServicePack & MSDE 常用资源 Reporting Services 联机丛书&#xff0c;2004 年 1 月更新http://www.microsoft.com/downloads/details.aspx?familyid5E550D73-8F35-435E-BB71-C8573A1CDBDB&displaylangzh-cnSQL Server™ 关键更新向导 - 用于 Micros…...

编程日记 2024/11/28 2:54:55

wordpress 悬浮框/域名免费注册0元注册

成员变量&#xff1a;是定义在类中&#xff0c;方法体之外的变量。这种变量在创建对象的时候实例化。成员变量可以被类中方法、构造方法和特定类的语句块访问。类变量&#xff1a;也声明在类中&#xff0c;方法体之外&#xff0c;但必须声明为static类型。1.生命周期不同成员变…...

编程日记 2024/11/28 2:07:30

网站建设网站建设哪家好/万网创始人

前言 认识世界的任务和先决条件之一&#xff0c;就是要把本体论信息恰如其分地转化为认识论信息&#xff0c;为其后的决策提供依据。牢记工程上量级的概念有多重要&#xff0c;不同的量级差距有多大&#xff0c;而且越到后来差距越大。始终牢记这一条。 对于投资人来讲&#xf…...

编程日记 2024/11/28 1:18:06

中央农村工作会议2023原文/成都网站快速排名优化

范围、利益相关者和目标 为我省科技创新团队提供平台 为省和国家相关部门提供相关数据以及提高管理效率 促进我省创信事业的发展 利益相关者分析 院长 希望项目可以简化员工的工作方式&#xff0c;优化管理&#xff0c;促进我省的科技创新发展 政府工作人员 希望得到领导的认可…...

编程日记 2024/11/28 1:13:04