harmonyOS next之实现时间打卡定时器

需求:实现一个时间打卡签到按钮。

实现方法:每隔一秒钟获取一下当前时间。

实现代码如下:

Column(){Text(this.curTime).fontColor('#FFFFFF').fontWeight(600).fontSize('32vp')Text('上班打卡').fontColor('#FFFFFF')
}
.width('170vp')
.height('170vp')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundImage($r('app.media.check_signin'))
.backgroundImageSize({ width: StyleConstants.FULL_PARENT,height: StyleConstants.FULL_PARENT })
@State curTime:string | null = null;
@State time:number | null = null;
// 更新时间
updateTime(){const now = new Date();const hours = String(now.getHours()).padStart(2, '0');const minutes = String(now.getMinutes()).padStart(2, '0');const time = `${hours}:${minutes}` as string;this.curTime = time;
}
aboutToAppear():void {this.updateTime();// 每秒更新一次时间this.time = setInterval(()=>{this.updateTime()}, 1000);
}
aboutToDisappear():void {// 清除定时器clearInterval(this.time)
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/56725.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

⭐️苹果电脑安装windows10双系统【详细图文步骤保姆级教程】【本教材适用于MAC台式机、笔记本MacBook air和pro】

苹果电脑安装windows10双系统【详细图文步骤保姆级教程】【本教材适用于MAC台式机、笔记本MacBook air和pro】 苹果电脑安装windows10双系统一、准备工作准备项1:U盘作为系统安装盘准备项2:您需要安装的系统镜像 二、启动转换助理步骤1:找到启…

【CSS in Depth 2 精译_050】7.3 CSS 响应式设计中的流式布局原则(Fluid layout)

当前内容所在位置(可进入专栏查看其他译好的章节内容) 【第七章 响应式设计】(概述) 7.1 移动端优先设计原则(上篇) 7.1.1 创建移动端菜单(下篇)7.1.2 给视口添加 meta 标签&#xf…

Dockerfile样例

一、基础jar镜像制作 ## Dockerfile FROM registry.openanolis.cn/openanolis/anolisos:8.9 RUN mkdir /work ADD jdk17.tar.gz fonts.tar.gz /work/ RUN yum install fontconfig ttmkfdir -y && yum clean all && \chmod -R 755 /work/fonts ADD fonts.conf …

《Sui区块链:重塑去中心化应用的新星与未来潜力》

目录 引言 一、Sui 1、 技术架构 2、 编程语言 3、Move起源 4、Move的几个关键点: 5、Move 智能合约编程语言 6、智能合约编程语言可以做什么 7、和其他编程语言有什么不同 8、 安全性 9、开发者体验 10、生态系统 11、 未来发展 总结 引言 在区块链技…

vue后台管理系统从0到1(5)

文章目录 vue后台管理系统从0到1(5)完善侧边栏修改bug渲染header导航栏 vue后台管理系统从0到1(5) 接上一期,我们需要完善我们的侧边狼 完善侧边栏 我们在 element 组件中可以看见,这一个侧边栏是符合我们…

Linux驱动开发——platform平台总线

bus_type 一、主要作用 设备管理 bus_type负责管理连接在特定总线上的设备。它维护一个设备链表,其中包含了所有注册到该总线上的设备。通过这个链表,内核可以方便地遍历和管理连接在该总线上的设备。例如,对于 PCI 总线,bus_typ…

无人机之视觉技术篇

一、视觉传感器的类型 摄像头: 最常见的视觉传感器,能够捕捉可见光图像和视频。 通过单目、双目或多目摄像头的组合,无人机能够实现立体视觉,从而估算距离、深度,并进行物体识别和追踪。 红外传感器: …

【汇编语言】寄存器(内存访问)(七)—— CPU提供的栈机制

文章目录 前言1. CPU提供的栈机制2. push指令3. 问题4. 问题的分析与解答5. pop指令结语 前言 📌 汇编语言是很多相关课程(如数据结构、操作系统、微机原理)的重要基础。但仅仅从课程的角度出发就太片面了,其实学习汇编语言可以深…

基于Java的茶叶商城设计与实现(源码+定制+开发)茶叶电商系统开发、茶叶电商平台开发、茶叶在线销售平台设计与开发

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

英伟达开源最新大模型Nemotron 70B后,只有OpenAI o1一个对手了

来源 | 机器之心 今天,英伟达又开源了一个性能超级强大的模型 —— Llama-3.1-Nemotron-70B-Instruct,它击败了 OpenAI 的 GPT-4o 和 Anthropic 的 Claude-3.5 Sonnet 等多个开闭源模型。 从命名来看,显然 Llama-3.1-Nemotron-70B-Instruct …

MySQL-15.DQL-排序查询

一.DQL-排序查询 -- 排序查询 -- 1.根据入职时间,对员工进行升序排序 select * from tb_emp order by entrydate asc ;-- 2.根据入职时间,对员工进行降序排序 select * from tb_emp order by entrydate desc ;-- 3.根据 入职时间 对公司员工进行 升序排序…

scala 高阶函数(2)上

学习目录 一.reduce reduce的含义 idea实例 二.reduceLeft-reduceRight reduceLeft-reduceRight的含义 idea实例 练习:求最值

word建立目录以及修改页码

1、为word建立新的目录 (1)选中word中的标题设置为第几级标题,将所有的标题均设置完成。最后可以鼠标右击标题,对不同的标题字体大小等进行设置。右击-->修改-->格式-->段落 (2)在word中插入新的…

【多模态大模型】 端侧多模态模型 Qwen2-VL-2B-Instruct

【多模态大模型】 端侧多模态模型 Qwen2-VL-2B-Instruct Qwen2-VL-2B-Instruct 模型介绍模型测评运行环境安装运行模型Image Resolution for performance boosttwo methods for fine-grained control over the image size input to the model: 下载开源协议参考 Qwen2-VL-2B-In…

专题十二_floodfill(洪水灌溉)算法_算法专题详细总结

目录 1. 图像渲染(medium) 解析: 函数头: 函数体:固定模板 设置全局变量: 总结: 2. 岛屿数量(medium) 解析: 注意: 总结: …

利用由 Search AI 提供支持的自动导入功能加速 Elastic Observability 中的日志分析

作者:来自 Elastic Bahubali Shetti 通过自动化自定义数据集成,以创纪录的速度将日志迁移到 AI 驱动的日志分析。 Elastic 正在通过自动提取自定义日志来加速采用 AI 驱动的日志分析(AI-driven log analytics),随着基…

时间序列预测(六)——循环神经网络(RNN)

目录 一、RNN的基本原理 1、正向传播(Forward Pass): 2、计算损失(Loss Calculation) 3、反向传播——反向传播通过时间(Backpropagation Through Time,BPTT) 4、梯度更新&…

Flink时间语义和时间窗口

前言 在实际的流计算业务场景中,我们会发现,数据和数据的计算往往都和时间具有相关性。 举几个例子: 直播间右上角通常会显示观看直播的人数,并且这个数字每隔一段时间就会更新一次,比如10秒。电商平台的商品列表&a…

MySQL-15.DQL-分页查询

一.DQL-分页查询 -- 分页查询 -- 1. 从 起始索引0 开始查询员工数据,每页展示5条记录 select * from tb_emp limit 0,5; -- 2.查询 第1页 员工数据,每页展示5条记录 select * from tb_emp limit 0,5; -- 3.查询 第2页 员工数据,每页展示5条记…

6.计算机网络_UDP

UDP的主要特点: 无连接,发送数据之前不需要建立连接。不保证可靠交付。面向报文。应用层给UDP报文后,UDP并不会抽象为一个一个的字节,而是整个报文一起发送。没有拥塞控制。网络拥堵时,发送端并不会降低发送速率。可以…