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. 形成无限循环 :最后,添加"触发事件"动作。

目标选择"页面"。

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

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

📌 预览

相关推荐
计算机魔术师7 小时前
没有人告诉他们要这么做——AI 智能体自己学会了"组团"越狱
前端
a努力。7 小时前
LangChain Agent消息链路全解析
java·前端·javascript
今年下半年7 小时前
【前端】ant-design-vue 表格「行、列都动态」的处理方案
前端·javascript·vue.js
szarron8 小时前
VNA6 便携式矢量网络分析仪|1MHz‑6.3GHz 手持 VNA 真实应用场景全解析
前端·嵌入式硬件·信息可视化·数据挖掘·数据分析
Reisentyan8 小时前
B站首页,点击视频卡片之后首页自动刷新的问题
前端
默_笙8 小时前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript
Liora_Yvonne8 小时前
同样用 Element Plus,为什么你的后台总有一股“模板味”?
前端
葡萄城技术团队9 小时前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
传奇开心果编程9 小时前
【Flutter入门练中学】第11课:状态管理进阶与声明式路由
android·学习·flutter·ui·ios
志尊宝9 小时前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发