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

CSS实现表格无限轮播

<div className={styles.tableTh}><div className={styles.thItem} style={{ width: '40%' }}>报警名称</div><div className={styles.thItem} style={{ width: '35%' }}>开始时间</div><div className={styles.thItem} style={{ width: '25%' }}>状态</div></div><div className={styles.tableBody} ref={scrollRef}>{alarmTableList.map((item, index) => {return (<div className={styles.bodyContent} key={index}><div style={{ width: '40%' }}>{item?.name}</div><div style={{ width: '35%' }}>{item?.time}</div><div style={{ width: '25%', color: item?.status === 0 ? '#12fd00' : '#f62222' }}>{item?.status === 0 ? '报警' : '正常'}</div></div>);})}</div>
      .tableTh {width: 100%;height: 36px;line-height: 36px;text-align: center;background-color: #2e3646;display: flex;justify-content: flex-start;.thItem {font-weight: bold;font-size: 16px;letter-spacing: 1px;color: #bae7ff;&:first-child {border-right: 1px solid #5a6477;}&:nth-child(2) {border-right: 1px solid #5a6477;}}}.tableBody {width: 100%;height: 86%;overflow: hidden;text-align: center;.bodyContent {font-size: 18px;display: flex;justify-content: flex-start;padding: 8px 0;&:nth-child(even) {background-color: #2e3646;}}}
  const scrollRef = useRef(null); // 用于表格滚动const [scrollTop, setScrollTop] = useState(0);const [alarmTableList, setAlarmTableList] = useState([]); // 表格数据// 滚动动画的函数const scrollAnimation = () => {if (scrollRef.current) {// 每次滚动的高度const step = 1;// 更新scrollTop的值setScrollTop((prevScrollTop) => {// 当滚动到内容底部时,重置滚动位置到顶部if (prevScrollTop >= scrollRef.current.scrollHeight - scrollRef.current.clientHeight) {return 0;}return prevScrollTop + step;});}};useEffect(() => {const tableArr = [];for (let i = 1; i <= 32; i++) {let obj = {name: i + '级报警',time: '09:23',status: i % 2 === 0 ? 1 : 0, // 0:报警};tableArr.push(obj);}setAlarmTableList(tableArr);const intervalId = setInterval(scrollAnimation, 50); // 每50毫秒滚动一次return () => {clearInterval(intervalId); // 组件卸载时清除定时器};}, []); // 当scrollTop变化时,重新设置滚动位置useEffect(() => {if (scrollRef.current) {// 设置scrollRef的scrollTop属性来滚动内容scrollRef.current.scrollTop = scrollTop;}}, [scrollTop]); // 当scrollTop变化时,重新设置滚动位置

相关文章:

CSS实现表格无限轮播

<div className{styles.tableTh}><div className{styles.thItem} style{{ width: 40% }}>报警名称</div><div className{styles.thItem} style{{ width: 35% }}>开始时间</div><div className{styles.thItem} style{{ width: 25% }}>状态&…...

编程小白如何从迷茫走出

针对新生们常常感到的迷茫&#xff0c;以下是如何选择适合自己的编程语言、如何制定有效的学习计划以及如何避免常见的学习陷阱的详细建议&#xff1a; 一、如何选择适合自己的编程语言 明确需求和目标&#xff1a;不同的编程语言有不同的特点和适用场景。例如&#xff0c;Py…...

14 B端产品的运营管理

通过运营找到需求并通过交换价值提供供给&#xff0c;再逐步扩大规模、站稳脚跟&#xff0c;辅助产品在商业竞争中获胜。 B端产品运营框架 1. 打通渠道 目的&#xff1a;触达客户。 环节&#xff1a;文案策划、活动策划→广告渠道推广→线下BD。 线下BD&#xff1a;通过见面…...

STM32_RTOS学习笔记——1(列表与列表项)

总体RTOS笔记目录 一&#xff0c;列表与列表项&#xff08;本文&#xff09; 二&#xff0c;待定 视频参考&#xff1a;B站野火 一&#xff0c;C语言列表概念 列表就是C语言中的链表&#xff0c;链表就如同下面的衣架一样&#xff0c;需要的各种内容可以参考 C语言链表可…...

子网划分案例

划分子网是将一个较大的网络划分为多个较小的子网&#xff0c;以提高网络管理和安全性 子网划分可以更有效地利用 IP 地址空间&#xff0c;并且有助于控制网络流量、提高网络性能和安全性。 子网划分的主要步骤如下&#xff1a; 确定需要划分的子网数量以及每个子网所需的主…...

javaweb_02:Maven

一、引入 在javaweb的开发中&#xff0c;需要使用大量的jar包&#xff0c;我们得手动去导入&#xff0c;而Maven可以自动帮我们导入和配置这个jar包。 二、Maven项目框架管理工具 核心思想&#xff1a;约定大于配置&#xff08;有约束不违反&#xff09;&#xff1a;Maven会…...

19.延迟队列优化

问题 前面所讲的延迟队列有一个不足之处&#xff0c;比如现在有一个需求需要延迟半个小时的消息&#xff0c;那么就只有添加一个新的队列。那就意味着&#xff0c;每新增一个不同时间需求&#xff0c;就会新创建一个队列。 解决方案 应该讲消息的时间不要跟队列绑定&#xf…...

P10477 Subway tree systems 题解,c++ 树相关题目

题目 poj 链接 洛谷链接 n n n 组数据&#xff0c;每组数据给定两个 01 01 01 串&#xff08;长度不超过 3000 3000 3000&#xff09;&#xff0c;意思如下&#xff1a; 对于每一个 0 0 0&#xff0c;代表该节点有一个子节点&#xff0c;并前往该子节点。对于每一个 1 1 …...

18.jdk源码阅读之CopyOnWriteArrayList

1. 写在前面 CopyOnWriteArrayList 是 Java 中的一种线程安全的 List 实现&#xff0c;基于“写时复制”&#xff08;Copy-On-Write&#xff09;机制。下面几个问题大家可以先思考下&#xff0c;在阅读源码的过程中都会解答&#xff1a; CopyOnWriteArrayList 适用于哪些场景…...

美股:AMD展现乐观前景,挑战AI加速器市场霸主

在科技行业的激烈竞争中&#xff0c;AMD公司近期发布了对当前季度收入的乐观预测&#xff0c;显示出其新推出 一、AMD第三季度营收预期超越分析师平均预期 AMD在周二的声明中预计&#xff0c;第三季度营收将达到约67亿美元&#xff0c;这一数字超出了分析师此前平均预期的66.…...

如何提高计算机视觉技术在复杂环境和低光照条件下的物体识别准确率?

要在复杂环境和低光照条件下提高计算机视觉技术的物体识别准确率&#xff0c;可以采取以下几个方法&#xff1a; 数据增强&#xff1a;在训练集中添加各种复杂环境和低光照条件下的图片&#xff0c;通过增加数据的多样性&#xff0c;使算法能够更好地适应各种场景。 预处理&am…...

ubuntu cmake使用自己版本的qt

给一篇文章参考 https://blog.csdn.net/bank_dreamer/article/details/138678909 自己使用的范例 set(Qt5_DIR "/home/peak/Qt5.14.0/5.14.0/gcc_64/lib/cmake/Qt5")# 设置Qt5的安装目录 #set(CMAKE_PREFIX_PATH "/home/peak/Qt5.14.0")find_package(Qt5…...

Python基础知识笔记---保留字

保留字&#xff0c;也称关键字&#xff0c;是指被编程语言内部定义并保留使用的标识符。 一、保留字概览 二、保留字用途 1. False&#xff1a;表示布尔值假。 2. None&#xff1a;表示空值或无值。 3. True&#xff1a;表示布尔值真。 4. not&#xff1a;布尔逻辑操作符…...

Python面试整理-Web开发

在Python中,Web开发可以利用多种强大的框架和库来构建从简单的静态网页到复杂的动态Web应用。以下是几种流行的Python Web开发框架和相关技术的概述: 1. Flask Flask 是一个轻量级的Web应用框架,它非常灵活,适用于小型到中型项目,或作为构建微服务的基础。Flask的核心非常…...

民大食堂用餐小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;档口号管理&#xff0c;商家餐品管理&#xff0c;餐品种类管理&#xff0c;购物车管理&#xff0c;订单信息管理 微信端账号功能包括&#xff1a;系统首页&a…...

Linux系统编程(4):消息队列

Linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的。 而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室 以及 BSD&#xff08;加州大学伯克利分校的伯克利软件发布中心&#xff09;&#xff0c; 他们在进程间通信方面的侧重点有所不同&#xff1b; 前…...

【初阶数据结构篇】单链表的实现(赋源码)

文章目录 单链表的实现代码位置概念与结构概念&#xff1a;结构&#xff1a; 链表的性质链表的分类单链表的实现单链表的创建和打印及销毁单链表的创建单链表的打印单链表的销毁 单链表的插入单链表头插单链表尾插单链表在指定位置之前插入数据单链表在指定位置之后插入数据 单…...

LeetCode 2844.生成特殊数字的最少操作(哈希表 + 贪心)

给你一个下标从 0 开始的字符串 num &#xff0c;表示一个非负整数。 在一次操作中&#xff0c;您可以选择 num 的任意一位数字并将其删除。请注意&#xff0c;如果你删除 num 中的所有数字&#xff0c;则 num 变为 0。 返回最少需要多少次操作可以使 num 变成特殊数字。 如…...

昇思MindSpore 应用学习-基于 MindSpore 实现 BERT 对话情绪识别

基于 MindSpore 实现 BERT 对话情绪识别 模型简介 BERT全称是来自变换器的双向编码器表征量&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;&#xff0c;它是Google于2018年末开发并发布的一种新型语言模型。与BERT模型相似的预训练语言模…...

【初阶数据结构篇】顺序表和链表算法题

文章目录 顺序表算法题移除元素删除有序数组中的重复项合并两个有序数组 链表算法题移除链表元素反转链表链表的中间结点合并两个有序链表链表分割链表的回文结构 顺序表算法题 不熟悉顺序表的可以先了解一下 顺序表实现方法 移除元素 给你一个数组 nums 和一个值 val&#x…...

《最终的数据解读指南》

原文&#xff1a;towardsdatascience.com/the-ultimate-guide-to-making-sense-of-data-aaa121db1119?sourcecollection_archive---------0-----------------------#2024-06-04 来自 Uber、Meta 和高速成长初创公司的 10 年经验教训 https://medium.com/twalbaum?sourcepost…...

告别演讲焦虑:PPTTimer如何让时间管理变得简单智能

告别演讲焦虑&#xff1a;PPTTimer如何让时间管理变得简单智能 【免费下载链接】ppttimer 一个简易的 PPT 计时器 项目地址: https://gitcode.com/gh_mirrors/pp/ppttimer 你是否曾在重要演讲时频繁看表&#xff0c;担心时间不够用&#xff1f;是否在PPT演示中因时间控制…...

Potree加载点云实战:从CloudCompare检查到浏览器3D展示的全链路避坑

Potree点云加载全流程实战&#xff1a;从数据验收到3D可视化的深度指南 点云数据正逐渐成为三维地理信息系统、建筑信息模型和数字孪生领域的核心载体。作为开源点云可视化库的佼佼者&#xff0c;Potree以其高效的Web端渲染能力赢得了众多开发者的青睐。然而在实际项目集成过程…...

Vibe Coding 实战:我用一条 Prompt 指挥 AI “盲盒式”生成 3D 积木物理世界

&#x1f680; Vibe Coding 实战&#xff1a;我用一条 Prompt 指挥 AI “盲盒式”生成 3D 积木物理世界&#xff09;一、 引言&#xff1a;欢迎来到 Vibe Coding 时代1.1 什么是 Vibe Coding&#xff1f;从“一行行敲代码”到“用直觉与语义编程”的范式转变1.2 为什么选择 3D …...

ElevenLabs台湾话语音上线后用户留存率骤降47%?揭秘方言语料清洗盲区与3步合规性校验法

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs台湾话语音上线后用户留存率骤降47%&#xff1f;揭秘方言语料清洗盲区与3步合规性校验法 ElevenLabs于2024年Q2正式上线台湾话&#xff08;闽南语&#xff09;语音合成服务&#xff0c;初期D…...

一招提升引用率:如何让你的数据成为AI的“唯一信源”?

随着生成式AI全面渗透搜索场景&#xff0c;传统SEO的流量逻辑正在彻底重构。过去外贸网站优化核心是抢占搜索引擎关键词排名&#xff0c;而当下慧新AI GEO&#xff08;生成式引擎优化&#xff09;成为新核心——AI模型不再单纯展示网页链接&#xff0c;而是整合全网数据生成答案…...

SketchBook Pro 中文版

🎨 绘画爱好者必看!SketchBook Pro 中文破解版,让你的创意自由飞翔!✨ 👋 各位CSDN的小伙伴们,大家好呀~ 今天给大家带来一款超级好用的数字绘画神器—— SketchBook Pro 中文破解版!🎨🎨🎨 如果你是喜欢画画的、搞设计的、画概念图的,或者平时需要在电脑/平…...

如何为你的Python数据分析脚本注入多模型AI能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 如何为你的Python数据分析脚本注入多模型AI能力 对于数据分析师和科研工作者而言&#xff0c;Python脚本是处理数据、生成报告的核…...

别再手动写RAM/ROM了!用Xilinx Block Memory Generator IP核的5个实战技巧(附Vivado仿真代码)

别再手动写RAM/ROM了&#xff01;用Xilinx Block Memory Generator IP核的5个实战技巧&#xff08;附Vivado仿真代码&#xff09; 在FPGA开发中&#xff0c;存储器模块的设计往往占据大量时间。许多工程师习惯手动编写RTL代码实现RAM/ROM功能&#xff0c;却忽略了Xilinx提供的B…...

ARM SVE存储指令ST1D与ST1H深度解析与优化

1. ARM SVE存储指令深度解析在ARMv8架构的可扩展向量扩展(SVE)指令集中&#xff0c;ST1D和ST1H指令扮演着关键角色。这些指令专为高效的内存存储操作设计&#xff0c;特别适合处理大规模数据集的场景。与传统的标量存储指令相比&#xff0c;它们能同时处理多个数据元素&#xf…...