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

「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器

news 来源：原创 2025/7/5 22:09:50

本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后，屏幕上的数字会以滚动动画的形式随机变动，最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
在这里插入图片描述

关键词

UI互动应用
数字滚动
动画效果
状态管理
用户交互

一、功能说明

数字滚动抽奖器应用允许用户点击按钮启动数字滚动动画，最终随机显示一个中奖号码。抽奖结果通过动画和随机数结合的方式呈现，增强了应用的趣味性。

二、所需组件

@Entry 和 @Component 装饰器
Column 布局组件
Text 组件用于显示滚动数字
Button 组件用于用户交互
@State 修饰符用于状态管理
定时器函数 setInterval 和 clearInterval

三、项目结构

项目名称：LotteryApp
自定义组件名称：LotteryPage
代码文件：LotteryPage.ets、Index.ets

四、代码实现

// 文件名：LotteryPage.ets@Component
export struct LotteryPage {@State currentNumber: number = 0; // 当前显示的数字@State isRolling: boolean = false; // 是否正在滚动private intervalId: number | null = null; // 定时器 IDbuild() {Column({ space: 20 }) { // 创建垂直布局容器// 显示当前数字Text(`${this.currentNumber}`).fontSize(50).fontWeight(FontWeight.Bold).fontColor(this.isRolling ? Color.Gray : Color.Blue).textAlign(TextAlign.Center).margin({ top: 30 });// 显示猫咪图片装饰Image($r('app.media.cat')).width(85).height(100).borderRadius(5).alignSelf(ItemAlign.Center);// 开始或停止抽奖按钮Button(this.isRolling ? '停止抽奖' : '开始抽奖').onClick(() => {if (this.isRolling) {this.stopRolling();} else {this.startRolling();}}).fontSize(20).backgroundColor(this.isRolling ? Color.Red : Color.Green).fontColor(Color.White).width('60%').alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 开始滚动的方法private startRolling() {this.isRolling = true;this.intervalId = setInterval(() => {this.currentNumber = Math.floor(Math.random() * 100); // 生成 0-99 的随机数}, 100); // 每 100 毫秒更新数字}// 停止滚动的方法private stopRolling() {this.isRolling = false;if (this.intervalId !== null) {clearInterval(this.intervalId);this.intervalId = null;}}
}

// 文件名：Index.etsimport { LotteryPage } from './LotteryPage';@Entry
@Component
struct Index {build() {Column() {LotteryPage() // 调用抽奖页面}.padding(20)}
}

效果示例：用户点击“开始抽奖”按钮后，屏幕上的数字会快速滚动；点击“停止抽奖”按钮，滚动停止并显示一个随机数字作为中奖结果。

五、代码解读

状态管理：@State currentNumber 和 @State isRolling 用于控制数字显示和滚动状态。
滚动逻辑：通过 setInterval 实现快速更新 currentNumber，模拟滚动效果。
动画效果：数字在滚动时使用灰色，停止滚动时使用蓝色，增强视觉效果。
定时器控制：clearInterval 确保滚动停止时清理定时器，避免资源泄漏。

六、优化建议

增加范围设置：允许用户设置随机数字的范围，例如 1-100 或 1-1000。
增加声音效果：滚动时添加背景音效，停止时播放获奖音效。
显示历史记录：记录每次抽奖的结果，提供用户参考。

七、相关知识点

「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

小结

通过数字滚动抽奖器的实现，你学会了如何结合定时器和状态管理实现动态数字更新，并将其应用于有趣的互动场景中。此示例轻量实用，适合入门开发者实践。

下一篇预告

在下一篇「UI互动应用篇14 - 随机颜色变化器」中，我们将探索如何通过点击按钮实现界面背景的随机颜色变化，提升用户体验。

上一篇：「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

下一篇：「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=318
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器

本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后，屏幕上的数字会以滚动动画的形式随机变动，最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。关键词 UI互动应用数字滚动动画效果状态管理用户交…...

编程日记 2025/7/5 22:09:50

安装使用Ubuntu18.04超级大全集最初版（anaconda，pycharm，代理，c/c++环境）

本文介绍ubuntu1804中我目前用到的环境的完整配置，包括ubuntu安装软件，更新环境变量等都有涉及。图片非常多，能给的连接和材料都给了。希望能帮助到新同学。目录目录目录环境及镜像文件安装Ubuntu 编辑开机之后编辑更新…...

编程日记 2025/7/2 1:09:42

Redis设计与实现第16章 -- Sentinel 总结1（初始化、主从服务器获取信息、发送信息、接收信息）

Sentinel是Redis的高可用解决方案：由一个或多个Sentinel实例组成的Sentinel系统可以监视任意多个主服务器，以及这些主服务器属下的所有从服务器，被监视的主服务器进入下线状态时，自动将下线主服务器属下的某个从服务器升级为新的主…...

编程日记 2025/6/29 19:09:52

ChatGPT科研应用、论文写作、课题申报、数据分析与AI绘图

随着人工智能技术的飞速发展，ChatGPT等先进语言模型正深刻改变着科研工作的面貌。从科研灵感的激发、论文的高效撰写，到课题的成功申报，乃至复杂数据的深度分析与可视化呈现，AI技术均展现出前所未有的潜力。其实众多科研前沿工作者…...

编程日记 2025/7/3 2:38:24

OceanBase数据库系列之：基于docker快速安装OceanBase数据库，基于linux服务器快速部署OceanBase数据库

OceanBase数据库系列之：基于docker快速安装OceanBase数据库，基于linux服务器快速部署OceanBase数据库一、docker快速安装OceanBase数据库下载OceanBase数据库镜像查看镜像启动OceanBase数据库查看OceanBase数据库是否启动成功二、基于linux部署OceanBa…...

编程日记 2025/7/1 4:22:04

无星的微前端之旅（四）——qiankun线上服务代理到本地

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。所以这里来逆推一下实现方式。解决了什么痛点 1.开发一个模块，需要启动2-3个项目在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用&am…...

编程日记 2025/7/2 19:42:11

鸿蒙进阶篇-Stage模型、UIAbility

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…...

编程日记 2025/7/1 22:34:56

快速上手：如何开发一个实用的 Edge 插件

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。我们将涵盖保存背景设置到插件选项页&a…...

编程日记 2025/7/5 11:25:58

java缓存技术点介绍

1. 缓存（Cache）： • 缓存是指用于存储数据的临时存储区域，以便快速访问。在Java中，缓存通常用于存储频繁访问的对象、结果集或其他数据。 2. 缓存命中率（Cache Hit Ratio）： • 缓存命…...

编程日记 2025/7/3 10:17:01

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】前言一、功能介绍二、硬件部分三、软件部分总结前言 🔥这里是小殷学长，单片机毕业设计篇12-基于stm32c8t6的智能称重系统设计 🧿创作不易，拒绝白嫖可私一、功能介绍 ----…...

编程日记 2025/7/3 3:18:11

音视频流媒体直播/点播系统EasyDSS互联网视频云平台介绍

随着互联网技术的飞速发展，音视频流媒体直播已成为现代社会信息传递与娱乐消费的重要组成部分。在这样的背景下，EasyDSS互联网视频云平台应运而生，它以高效、稳定、便捷的特性，为音视频流媒体直播领域带来了全新的解决方案。 1、产…...

编程日记 2025/7/3 11:26:17

3dtile平移子模型以及修改 3D Tiles 模型的模型矩阵z平移

第一段代码：应用平移变换到子模型这段代码的目的是获取子模型的变换矩阵，并将其平移 10 个单位。 if (submodel) {// 获取当前子模型的变换矩阵let transform submodel.transform// 创建一个向上的平移矩阵，平移 10 个单位let translation…...

编程日记 2025/7/1 16:30:23

JavaScript中类数组对象及其与数组的关系

JavaScript中类数组对象及其与数组的关系 1. 什么是类数组对象？ 类数组对象是指那些具有 length 属性且可以通过非负整数索引访问元素的对象。虽然这些对象看起来像数组，但它们并不具备真正数组的所有特性，例如没有继承 Array.prototype 上…...

编程日记 2025/7/1 11:30:48

【机器学习】机器学习学习笔记 - 监督学习 - 逻辑回归分类朴素贝叶斯分类支持向量机 SVM (可分类、可回归) - 04

逻辑回归分类 import numpy as np from sklearn import linear_modelX np.array([[4, 7], [3.5, 8], [3.1, 6.2], [0.5, 1], [1, 2], [1.2, 1.9], [6, 2], [5.7, 1.5], [5.4, 2.2]]) y np.array([0, 0, 0, 1, 1, 1, 2, 2, 2])# 逻辑回归分类器 # solver：求解器&a…...

编程日记 2025/6/27 20:20:07

Python脚本文件开头两行#!/usr/bin/python和# -- coding: utf-8 --的作用

Linux环境下，Python脚本代码文件，比如test.py，文件的第一行一般要指定解释器，使用Linux的Shebang的形式指定，第二行一般指定编码格式。首行指定解释器工具，使用方式如下： # 第1种方式&#x…...

编程日记 2025/7/5 21:49:50

使用PyQt5开发一个GUI程序的实例演示

一、安装Python 下载安装到这个目录 G:\Python38-32 安装完成有这些工具，后面备用： G:\Python38-32\Scripts\pyrcc5.exe G:\Python38-32\Scripts\pyuic5.exe 二、PyQt环境配置 pip install PyQt5 pip install pyqt5-tools 建议使用国内源&#xff0c…...

编程日记 2025/7/3 7:26:58

3d扫描建模产品开发-三维扫描检测蓝光检测

现当下，汽车制造、航空航天，还是消费电子、医疗器械，三维扫描检测与蓝光技术正以前所未有的精度和效率，推动着产品从概念到实物的快速转化。三维扫描技术，简而言之，就是通过激光、结构光（如蓝…...

编程日记 2025/7/5 22:06:42

多线程——01

1. 进程/任务 process/task 进程是操作系统对一个正在运行的程序的一种抽象，换言之，可以把进程看做程序的一次运行过程每个进程想要执行，都需要消耗一定的系统资源（硬件资源） 1）进程在系统中的作用 a…...

编程日记 2025/7/3 23:53:16

Makefile中-D选项定义预编译处理宏

1.简单示例假设我们有一个简单的 C 程序main.c，内容如下： #include <stdio.h> #ifdef DEBUGvoid print_debug_info() {printf("This is debug information.\n");} #elsevoid print_debug_info() {} #endif int main() {print_debug_info();printf("Prog…...

编程日记 2025/7/5 22:03:32

NAPI杂记

NAPI和tasklet区别：NAPI是利用的软中断NET_RX_SOFTIRQ实现， tasklet是利用TASKLET_SOFTIRQ实现另外文章说NAPI主要是采用轮询，可以减少中断触发次数。do_softirq里面是开中断执行的啊？ 中断处理函数关闭中断开始处理。如果此时…...

编程日记 2025/7/3 1:08:57

006 MATLAB编程基础

01 M文件 MATLAB输入命令有两种方法： 一是在MATLAB主窗口逐行输入命令，每个命令之间用分号或逗号分隔，每行可包含多个命令。二是将命令组织成一个命令语句文集，使用扩展名“.m”，称为M文件。它由一系列的命令和语句…...

编程日记 2025/7/4 22:07:35

使用Alpine镜像作为基础镜像的Dockerfile配置

配置阿里 apk源： /etc/apk/repositories： https://mirrors.aliyun.com/alpine/v3.13/main alpine-v3.13-community安装包下载_开源镜像站-阿里云或者使用命令 sed -i sdl-cdn.alpinelinux.orgmirrors.aliyun.comg /etc/apk/repositories dockerfil…...

编程日记 2025/7/5 16:05:18

RAG (Retrieval Augmented Generation) 检索增强和生成

1 RAG技术简介 1.1 RAG技术概述 RAG（Retrieval Augmented Generation） 是一种结合了检索（Retrieval）和生成（Generation）的技术，旨在通过利用外部知识库来增强大型语言模型（LLMs&am…...

编程日记 2025/7/2 9:29:41

Figma入门-约束与对齐

Figma入门-约束与对齐前言在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的&#xff0c…...

编程日记 2025/7/2 1:06:16

039集——渐变色之：CAD中画彩虹（）（CAD—C#二次开发入门）

（来左边儿跟我一起画个龙，在你右边儿画一道彩虹 ~~~~~~~~~~~ ） 效果如下： namespace AcTools {public class Class1{public Wform.Timer timer;//定时器需建在类下面public static DateTime startTime;[CommandM…...

编程日记 2025/7/5 15:05:13

MTK主板_小型联发科安卓主板_行业智能终端主板基于联发科方案

MTK安卓主板是一款小巧而高效的科技产品，其尺寸仅为43.4mm x 57.6mm。采用了先进的联发科12nm制程工艺，这款主板搭载四核或八核64位A53架构的CPU，主频高达2.0GHz，不但保证了出色的计算能力，还实现了超低功耗的特点。系…...

编程日记 2025/7/3 3:14:18

Arrays.copyOfRange(),System.arraycopy() 数组复制,数组扩容

Arrays.copyOfRange() 当需要将数组中的长度扩容时, 数组复制使用需要用到Arrays 类提供的的参数解析 * param original the array from which a range is to be copied * param from the initial index of the range to be copied, inclusive * param to the final ind…...

编程日记 2025/7/3 10:12:26

Docker for Everyone Plus——No Enough Privilege

直接告诉我们flag在/flag中，访问第一小题： sudo -l查看允许提权执行的命令： 发现有image load命令题目指明了有rz命令，可以用ZMODEM接收文件，看到一些write up说可以用XShell、MobaXterm、Tabby Terminal等软件连接上…...

编程日记 2025/7/4 22:39:41

ElasticSearch学习笔记把：Springboot整合ES（二）

一、前言上一篇文章中我们学习了ES中的Term级别的查询，包括 term、terms、terms_set、rang等，今天我们使用Java代码实现一遍上述的查询。二、项目依赖 POM <?xml version"1.0" encoding"UTF-8"?> <project xmlns&q…...

编程日记 2025/7/1 22:35:45

Linux系统之iotop命令的基本使用

Linux系统之iotop命令的基本使用一、iotop命令介绍二、iotop命令的使用帮助2.1 安装iotop2.2 iotop命令help帮助信息2.3 iotop命令选项解释三、 iotop命令的基本使用四、iotop使用注意事项一、iotop命令介绍 iotop 是一个类似于 top 的命令行工具，但它专注于显示…...

编程日记 2025/7/3 14:37:46

根据合约地址判断合约协议的方法

判断合约协议之前，需要了解一下什么是ERC165协议： ERC165 是以太坊中用于标准化接口检测的协议，由 Fabian Vogelsteller 在 2018 年创建 ，其核心内容主要包括以下方面： 接口定义单一函数接口：ERC165 协议…...

编程日记 2025/7/1 20:01:02

什么是sfp，onu，为什么PON（俗称“光猫”）模块使用SC光纤接口

在现代网络设备中，我们经常会看到SFP或SFP接口的身影，这些接口有时被简称为光口，但这个称呼并不严谨。有些厂商则称之为多功能口或多用途口，然而这对于不了解的人来说可能还是一头雾水。SFP，即Small Form-Factor Plugg…...

编程日记 2025/7/4 22:59:18

链表？-＞？（以尾插法说明，附头插法）

这篇文章做一些关于初学链表的一些问题的解答。我知道有些朋友只是需要一份完整的关于链表的代码，我会附在后面，大家直接划到最后就好。一、创建链表 (1 相信所有搜索过链表创建的朋友都看过这样一行： struct Line* head (struct Line…...

编程日记 2025/7/2 22:35:43

11.29周五F34-Day10打卡

文章目录 1. 问问他能不能来。解析答案：【解析答案分析】【对比分析】【拓展内容】2. 问题是他能不能做。解析答案：【解析答案分析】3. 问题是我们能否联系得上她。(什么关系?动作 or 描述?)解析答案：【解析答案分析】【对比分析】4. 我们在讨论是否要开一个会。解析答案：…...

编程日记 2025/7/5 4:47:58

【项目日记】仿mudou的高并发服务器 --- 实现HTTP服务器

对于生命，你不妨大胆一点， 因为我们始终要失去它。 --- 尼采 --- ✨✨✨项目地址在这里 ✨✨✨ ✨✨✨https://gitee.com/penggli_2_0/TcpServer✨✨✨ 仿mudou的高并发服务器 1 前言2 Util工具类3 HTTP协议3.1 HTTP请求3.2 HTTP应答 4 上下文解析模块…...

编程日记 2025/7/2 0:20:51

【SpringBoot问题】IDEA中用Service窗口展示所有服务及端口的办法

1、调出Service窗口打开View→Tool Windows→Service，即可显示。 2、正常情况应该已经出现SpringBoot，如下图请继续第三步 3、配置Service窗口的项目启动类型。微服务一般是Springboot类型。所以这里需要选择一下。点击最后一个号，点击Ru…...

编程日记 2025/7/3 16:29:06

Ubuntu20.04运行LARVIO

文章目录 1.运行 Toyish 示例程序2.运行 ROS Nodelet参考 1.运行 Toyish 示例程序 LARVIO 提供了一个简化的toyish示例程序，适合快速验证和测试。编译项目进入 build 文件夹并通过 CMake 编译项目： mkdir build cd build cmake -D CMAKE_BUILD_TYPER…...

编程日记 2025/7/3 3:42:23

数字化转型背景下，高职院校计算机网络应用的革新策略

在当今信息化时代，计算机网络已经成为高职院校教育不可或缺的一部分，它不仅极大地丰富了教育资源，提高了交流的便捷性，还催生了多样化的教学模式。对于高职院校来说，加强计算机网络应用的建设不仅是顺应时代潮流的必然…...

编程日记 2025/7/4 1:58:20

mysql 里面的主表和子表是什么?如何创建主表和子表的关系

在MySQL数据库中，主表和子表的概念是基于表间关系的。它们通常通过外键约束来建立联系，这种关系有助于维护数据的完整性和一致性。以下是对MySQL中主表和子表的详细解释： 主表（父表） 定义：主表&#xff0c…...

编程日记 2025/6/29 2:21:02

工程企业的成本管理系统软件应该有哪些特点？

工程企业的成本管理系统软件需要兼顾工程项目的复杂性和动态性，其功能特点应服务于成本核算、监控、优化与分析全生命周期管理，以下是关键特点： 一、核心功能特点 1. 全生命周期成本管理覆盖范围： 从项目立项、投标、预算编制&…...

编程日记 2025/7/1 13:58:46

【前端开发】实战：课表安排（HTML + JavaScript + Vue3 + Vant）

后端开发主要定义了三个核心部分：每周周期（WeekDays）、每天节次（TimeLessons） 和每天节次详情（Details） 每周周期（WeekDays） 存储了每周的七天（通常是从周一…...

编程日记 2025/7/1 11:54:35

nodejs建立TCP服务器端和TCP客户端之间的连接

TCP服务器端，看名字也知道是建立在服务器上面的 //获取模块 const net require(net); //创建server服务器 const servernet.createServer(); //与客户端建立连接 server.on(connection,function(socket){console.log(客户端与服务器连接已经建立);//socket是客户端…...

编程日记 2025/7/5 6:09:45

Pytorch使用手册-What is torch.nn really?（专题九）

我们建议将本教程作为 notebook 而不是脚本运行。要下载 notebook（.ipynb）文件，请点击页面顶部的链接。 PyTorch 提供了精心设计的模块和类，如 torch.nn、torch.optim、Dataset 和 DataLoader，帮助你创建和训练神经网络。为了充分利用这些工具的强大功能并根据你的问题进…...

编程日记 2025/7/2 0:04:25

ADAM优化算法与学习率调度器：深度学习中的关键工具

深度学习模型的训练效果离不开优化算法和学习率的选择。ADAM（Adaptive Moment Estimation）作为深度学习领域中广泛应用的优化算法之一，以其高效性和鲁棒性成为许多任务的默认选择。而学习率调度器则是优化算法的“助推器”，帮助训…...

编程日记 2025/7/2 7:11:27

黑马2024AI+JavaWeb开发入门Day03-Maven-单元测试飞书作业

视频地址：哔哩哔哩讲义作业飞书地址：飞书作业比较简单，随便写了写 package org.example;import org.junit.jupiter.api.Assertions; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.junit.ju…...

编程日记 2025/7/5 8:41:22

TouchGFX设计模式代码实例说明

一)Model - View - Presenter (MVP) 模式在 TouchGFX 中的应用 1)Model（模型）： 模型代表应用程序的数据和业务逻辑。例如，在一个简单的计数器应用中，模型可以是一个包含计数器当前值的类。 class CounterModel { pri…...

编程日记 2025/7/2 1:36:44

Docker扩容操作(docker总是空间不足)

Docker扩容操作(docker总是空间不足) 1、df二连，一共也就70g，总是占满93%以上。所以需要移动到其他目录上查看docker镜像和容器存储目录的空间大小 du -sh /var/lib/docker/2、停止docker服务 systemctl stop docker3、首先创建目录并迁移 # 首先创…...

编程日记 2025/7/4 7:34:27

ELK Fleet JAVA LOG收集与展示教程

目录 elastic-fleet架构 Elastic Agent的优势 Fleet JAVA日志收集流程 1.注册Fleet Sever 2.创建JAVA代理收集策略Agent Policy 3.添加集成 integration 4.调整Java log输出格式 5.添加Elastic Agent 6.添加Ingest 7.创建数据视图 8.其他Policy nginx-policy syst…...

编程日记 2025/7/4 19:30:22

【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

1 HTTP 协议整理 HTTP（Hyper Text Transfer Protocol）即超文本传输协议，是用于从万维网（WWW）服务器传输超文本到本地浏览器的传送协议，直白点儿，就是浏览器和服务器之间的数据交互就是通过 HTT…...

编程日记 2025/7/2 5:12:05

TiDB 调度概述

PD 是 TiDB 集群的管理模块，同时也负责集群数据的实时调度。本文档介绍一下 PD 的设计思想和关键概念。场景描述 TiKV 集群是 TiDB 数据库的分布式 KV 存储引擎，数据以 Region 为单位进行复制和管理，每个 Region 会有多个 Replica&#xf…...

编程日记 2025/6/27 21:53:14

关键词