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秒默认

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

相关推荐
元岳数字人小元6 天前
无惧网络受限:数字人私有化部署打造离线全域服务能力
运维·人工智能·开源·人机交互·交互
兰亭妙微UI设计公司7 天前
兰亭妙微UI设计公司分享:EQUA 智能健康生态系统 UI/UX 设计深度解析
ui·交互
xy34538 天前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
xy345311 天前
Axure 9.0 中继器创建与设置步骤
前端·ui·html·axure·原型·产品设计
hhzz11 天前
OpenCV 入门到精通 09】特征检测与匹配:从 Harris 到 ORB 图像配准
人工智能·opencv·计算机视觉·开源·交互
兰亭妙微UI设计公司12 天前
兰亭妙微APP界面设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路
ui·交互
智购科技自动售货机工厂12 天前
2026自动售货机端侧AI降本逻辑:从云端API到本地推理的成本重构~YH
人工智能·python·ui·面试·交互
羑悻的小杀马特13 天前
数据织网者:Jsoncpp库深度解析——从C++原生JSON处理到工程级数据交互实战全攻略
c++·json·交互·jsoncpp·原生库
大江东去浪淘尽千古风流人物15 天前
【UniSim-SLAM】前馈SLAM的双流架构:Sim(3)统一位姿图、与经典SLAM及DPVO的三范式对比
深度学习·计算机视觉·3d·交互·人体姿态估计·eccv·3d重建
工业HMI实战笔记15 天前
造纸行业HMI:纸机的卷取控制与质量监控界面
人工智能·交互·vr