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

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

相关推荐
Cxiaomu2 天前
AI 聊天流式交互基础:SSE、EventSource 与 ReadableStream
人工智能·交互
colin52103 天前
AxureRP9实例-上传附件教程,并且美化上传元件SL090002
axure·上传附件
电磁脑机3 天前
人脑电磁路由拓扑与外耦合脑机接口基础理论
分布式·神经网络·安全·交互
环黄金线HHJX.3 天前
【从0到1】
开发语言·人工智能·算法·交互
AI_零食3 天前
开源鸿蒙跨平台Flutter开发:极简暗黑风与五行雷达测绘架构
学习·flutter·游戏·华为·开源·交互·harmonyos
AI_零食4 天前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙麻将游戏应用
学习·flutter·游戏·华为·交互·harmonyos
AI_零食4 天前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙版本跳棋游戏应用
学习·flutter·游戏·华为·交互·harmonyos
电磁脑机4 天前
和大脑正确交互的脑机接口研究推演理论
分布式·神经网络·架构·交互·信号处理
清水白石0084 天前
《从同步到消息驱动:现代后端交互模式的深度解析与工程实践》
python·交互
木斯佳5 天前
HarmonyOS 6实战:HarmonyOS轻量化交互的两种方案改造与实践(上)
交互·harmonyos