axure9.0 如何打造一个计时器(简单版)

原理:在 Axure 9.0 中制作计时器,核心思路是利用"页面载入时"事件形成一个循环。

🕹️ 第一步:创建变量与界面

  1. 创建全局变量 :点击顶部菜单「项目 」→「全局变量」。

  2. 在弹出的窗口中,点击"添加 ",新建一个名为 CounterVar 的变量。

如果你做正计时 (从0开始增加),将 CounterVar 的默认值 设为 0。

如果你做倒计时 (从N开始减少),将 CounterVar 的默认值 设为你想要的秒数,例如 60。

⚙️ 第二步:实现核心计时逻辑

  1. 选中页面 :点击画布空白处,在右侧"交互"面板中为"页面载入时"事件添加用例。

  2. 设置显示文本 :在用例中,添加"设置文本 "动作,目标选为显示时间的元件。在"设置为"下拉菜单中选择"值 "或"文本 ",然后点击输入框旁的 fx 按钮,输入 [[CounterVar]]。

  3. 更新变量值 :再次点击"插入动作",添加"设置变量值"动作。

(1)目标选择 CounterVar。

(2)在"值"的 fx 编辑器中,输入决定计时方向的表达式:

正计时(增加) :[[CounterVar + 1]]

倒计时(减少) :[[CounterVar - 1]]

4. 设置等待时间 :继续添加"等待 "动作,在"ms"字段中输入 1000(代表1000毫秒,即1秒)。

5. 形成无限循环 :最后,添加"触发事件"动作。

目标选择"页面"。

事件选择"页面载入时"。

完成以上步骤,一个最基础的计时器就做好了。预览页面,你会发现数字会每秒自动变化。

📌 预览

相关推荐
原则猫6 小时前
UDP 到底怎么实现可靠的
前端
Java后端的Ai之路6 小时前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
裕晟资质规划7 小时前
三类涉密资质延续时限差异分析:军工60日与集成印制3个月的边界
java·服务器·前端·网络·安全
ShineWinsu7 小时前
对于JavaScript:JavaScript基础语法的解析
开发语言·前端·javascript·面试·web·基础语法·循环
月夏7 小时前
Vue3 转 React:18 项对照表 + 5 个必踩的坑(附 7 天上手路线)
前端
广州华水科技7 小时前
单北斗GNSS位移监测系统的应用与维护解析
前端
梦曦i8 小时前
uni-storage 0.1.0 发布:TTL过期管理+多实例隔离
前端·storage·uni-app x
猫头_9 小时前
AI 流式传输工程指南:模型吐出半截 JSON,前端如何边收边渲染?
前端·javascript·llm
console.log('npc')9 小时前
第 1 章 项目概述与环境搭建
前端·人工智能·大模型
定栓9 小时前
Webpack迁到Vite第七节(二):全家桶移除 — Babel 全家桶深度分析
前端·webpack·node.js