axure9.0 如何打造一个计时器(带前导零)
原理在 Axure 9.0 中制作计时器核心思路是利用“页面载入时”事件形成一个循环。️ 第一步创建变量与界面创建全局变量点击顶部菜单「项目」→「全局变量」。在弹出的窗口中点击“添加”新建一个名为CounterVar的变量。如果你做正计时从0开始增加将CounterVar的默认值设为0。如果你做倒计时从N开始减少将CounterVar的默认值设为你想要的秒数例如60。3. 设计界面在画布上拖入一个用于显示时间的矩形或文本标签以及“开始”、“停止”等控制按 钮。⚙️ 第二步实现核心计时逻辑选中页面点击画布空白处在右侧“交互”面板中为“页面载入时”事件添加用例。设置显示文本在用例中添加“设置文本”动作目标选为显示时间的元件。在“设置为”下拉菜单中选择“值”或“文本”然后点击输入框旁的fx按钮输入[[0.concat(Math.floor(CounterVar/60)).slice(-2)]]:[[0.concat(CounterVar%60).slice(-2)]]。3. 更新变量值再次点击“插入动作”添加“设置变量值”动作。1目标选择CounterVar。2在“值”的fx编辑器中输入决定计时方向的表达式正计时增加[[CounterVar 1]]倒计时减少[[CounterVar - 1]]4. 设置等待时间继续添加“等待”动作在“ms”字段中输入1000代表1000毫秒即1秒。5. 形成无限循环最后添加“触发事件”动作。目标选择“页面”。事件选择“页面载入时”。完成以上步骤一个最基础的计时器就做好了。预览页面你会发现数字会每秒自动变化。 第三步增加控制功能开始/暂停/重置为了让计时器更实用可以添加控制按钮。核心思路通过一个“开关”变量如isRunning来控制计时循环是否真正执行。在“页面载入时”的用例中增加一个条件情形只有当isRunning等于1代表“运行中”时才执行更新和循环的动作。如果isRunning不等于1则什么都不做计时器就“暂停”了。注添加全局变量按钮交互设置“开始”按钮点击时设置变量isRunning 1。然后执行“触发事件” → “页面载入时”手动启动循环。“暂停”按钮点击时设置变量isRunning 0。循环仍在进行但因为条件不满足计数会停止。“重置”按钮点击时设置CounterVar 0或初始值并设置isRunning 0。同时用“设置文本”动作将屏幕上的显示数字也重置为0。✨ 第四步优化显示效果显示为“分秒”格式如果倒计时超过60秒直接显示秒数不够直观。在“设置文本”的fx编辑器中可以用以下公式将总秒数格式化为“分:秒”带前导零如01:05[[0.concat(Math.floor(CounterVar/60)).slice(-2)]]:[[0.concat(CounterVar%60).slice(-2)]]个位数补零如果希望秒数或分钟数始终显示为两位数如05可以使用[[0.concat(变量).slice(-2)]]这个公式。 预览 总结在 Axure 9.0 中创建计时器的核心是“页面载入时循环”。通过“等待”和“触发事件”动作形成循环并用“全局变量”来存储和更新时间。各种复杂的功能如开始、暂停、重置都是在此基础上通过增加条件判断和控制变量来实现的