axure商城

随机数字键盘,简单实现版

受“【Axure 教程】随机乱序数字键盘,让数字飞一会儿”的启发,对数字键盘的实现,改良了一版稍微更简单的实现方式。

原来大神“产品锦李”的方案,运行后发现出现的数字有明显的时间等待和看到数字变化,因为每一个数字都是随机产生后再赋值显示的。稍微思考了一下,准备用一次性产生10位数字,一起赋值的方式,这样就不会有先后的视觉。

一、绘制键盘

首先拖进来一个表格,按照上图改成3*4的键盘形式,再拖进来1个动态面板(这个动态面板主要用来产生随机数的)

随机数字键盘,简单实现版

表格单元格的名称可以设置为1、2、3….

然后添加两个变量,一个用于保存当前生成的数字,一个用于保存生成所有的数字。

随机数字键盘,简单实现版

二、生成数字

通过“刷新”按钮,进行初始化,并启动“动态面板”的循环。

随机数字键盘,简单实现版

然后,在动态面板的循环中,写入如下代码:

随机数字键盘,简单实现版

代码说明:

1、每次循环都产生一个随机数,给到变量“curNum”;

2、如果当前产生的随机数,原来没有生产过(即是新的),且没有产生10个数字,则一直循环(到10个为止),

这是需要对numbers这个变量赋值,即把新产生的数字保存起来。

3、如果产生了10个数字,停止循环(即不需要再生成随机数字了),然后把这10个数字,通过字符截取的方式分别给到表格中显示,即可。

 

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

Axure10 母版更新功能说明

2023-12-7 9:48:31

Axure教程高级教程

【Axure中继器】利用中继器实现表格内新增一行和编辑的效果

2023-12-8 12:43:45

axure商城
3 条回复 A文章作者 M管理员
  1. 产品锦李

    👍
    偷偷告诉你,那个设计原来做过两版方案,一版是生成且判断数字符合后再显示,就不会有那个等待和看到数字变化的问题,另一版就是你看到的,一边生成一边显示,不符合再判断再显示,但因为我个人喜欢那个数字动态变化的效果,所以最终用了第二版的方案

    • 深南大道

      👍
      多交流~
      我也喜欢研究这些交互,可以让人多思考😁😁

  2. 黄老师
    黄老师给作者打赏了¥10
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索