AxurePR11实例-验证码倒计时交互功能JH110001

实例说明:

**说明:**点击图1的【发送验证码】则展示图2的【60s】倒计时,直至【0s】时返回到图1状态

实例原理:

一、首先设置一个全局变量【djs】,默认值=60(可根据自己需要倒计秒数)

二、通过【单击】事件,触发以下动作

1、设置文本(将默认值展示在指定元件中)

2、设置动态面板状态(也就是切换图1和图2的状态。也可以用同一个元件来实现)

3、等待(倒计时以秒为单位)

4、设置变量(这个时候就要让变量值-1)

5、触发事件(这里是做自动循环处理,也就是每秒自动单击事件)

以上就是倒计时循环中,接下来就是要加条件,不然这个事件就会一直循环下去。

条件1:当【djs】变量值>0时,则正常循环中

条件2:当【djs】变量值=0时,则停止循环。

1、设置动态面板状态(循环结束则恢复到图1状态)

2、设置变量值(将变量值恢复到默认值60)

实例教程:

相信小伙伴们了解交互的原理后,操作起来就会得心应手。现在开始实例教程,

1、添加全局变量【djs】

【项目】-》【全局变量】-》点【+号】-》设置【变量名称】和【变量值】

2、新建一个动态面板

设置2个状态,每个状态里放一个元件

3、添加【单击】事件

选中【状态1】的元件,添加【单击】事件,动作【设置文本】目标为状态2的元件,文件值【\[djs]s】

4、添加动作【设置动态面板状态】

5、添加动作【等待】

1000毫秒=1秒

6、添加动作【设置变量值】

目标【djs】值设置为【\[djs-1]】

7、添加动作【触发事件】

目标选择状态1里的元件,下面再选择【单击】事件

8、添加【条件1】

选择【启用用例】-》【添加条件】

弹出用例框后,再选择【添加条件】

下面条件中【变量值】-》选择【djs】变量 -》【>】大于号 -》【文本值】-》【0】

设置完成后点击【确认】即可,以下是条件1设置成功

9、添加【条件2】

继续点击【添加用例】,条件相同,唯一把【>】修改成【=】,设置好后点击【确定】

10、条件2里添加两个动作

第一个动作【设置动态面板状态】,将状态切换到【状态1】

第二个动作【设置变量值】将【djs】变量恢复为60秒默认

以上配置完成后,就可以预览看最终效果

相关推荐
做萤石二次开发的哈哈1 小时前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
LayZhangStrive2 小时前
Agent开发 - 实现人类与Manus智能体的终端窗口命令交互
ai·交互·agent·react·终端·manus
yyt36304584118 小时前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化
Dream-Y.ocean20 小时前
基于具身交互智能数字人,我用Flask搭了一个AI教学平台:课代表AI全流程实战
人工智能·flask·交互
励志不掉头发的内向程序员21 小时前
【LibreCAD 2D架构】从鼠标点击到图形创建:RS_ActionDrawLine交互流程与状态机解析
开发语言·c++·qt·学习·系统架构·计算机外设·交互
Htr_21 小时前
Reflexio 使用指南:让 AI 智能体从每次交互中持续学习
人工智能·学习·交互
xy34532 天前
Axure9.0中继器遮罩实现方法
前端·ui·html·axure·原型·产品设计
智购科技无人售货机工厂店2 天前
2026自动售货机大屏交互设计原则:从信息层级到视觉动线的工程实践~YH
运维·python·单片机·嵌入式硬件·自动化·交互
平头哥技术团队2 天前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
yume_sibai3 天前
Element Plus 导航与反馈组件完全指南(15个核心组件)
前端·elementui·交互