随机数字键盘的实现

数字键盘好实现,但是如果键盘上的数字是随机排列……也没什么不好实现。

我们先来看案例要实现的交互效果。

这个案例包含以下交互:

1、数字键盘可以向任意光标所在的文本框文本框叠加数字;

2、光标进入文本框时,显示数字键盘;

3、点击收起按钮时,隐藏数字键盘;

4、数字键盘的数字,在每次显示键盘时重新随机排列;

5、清空按钮可以清空任意光标所在的文本框的文字;

6、退格按钮能够对任意光标所在的文本框文字进行退格。

清楚了要做什么,接下来我们看实现步骤。

为了让大家更易懂,这篇教程我把思路和实现步骤一起写。

第一步,我们先来准备元件。

先放入这么多元件,其他的一会儿再放入。

因为有些交互都是重复的,复制元件就可以,没有必要逐个去添加。

这里单独说一下“NumberText”这个元件。

这个元件是用于取不重复的随机数字的。

因为我们获取的随机数会有重复,如果想获取不重复的数字,可以从“NumberText”这个元件的文字中随机取出,取出后将这个元件文字中已取出的数字清除,这样没次取出的就是不重复的数字。

除此以外的其他元件,大家应该一目了然它们的用途,我就不再赘述(赘述这个词用得好,显得很有文化底蕴)。

第二步、数字按钮需要获取到随机数。

我们可以在数字按钮“Num”的【载入时】(在更多事件中)添加交互,【设置文本】于“当前元件”为随机从元件“NumberText”中取出的数字。

我们创建一个局部变量n获取到“NumberText”的【元件文字】,然后进行随机获取。

这个公式是“[[n.charAt(Math.floor(Math.random()*n.length))]]”。

其中,n.charAt(x)能够获取n这个字符串中指定位置的字符,参数x就是我们要指定的位置数字,而这个数字我是通过Math.floor(Math.random()*n.length)计算出来的随机数。

然后,涉及到了随机数的公式:向下取整(随机数*获取的个数)+起始数

  • Math.floor(x)函数能够对指定数字向下取整,参数x就是我们要指定的数字,而这个数字我是通过Math.random()*n.length计算出来的随机数。
  • Math.random()是随机数函数能够获取随机数。
  • n.length能够获取n这个字符串中字符的数量,这里用到这个系统变量,是因为这里不能写固定数值,因为每次获取到数字之后,“NumberText”上对应的数字我们都要清除,也就意味着它的文字数量会变化,我们用系统变量去获取这个不固定的长度,才能保证计算不会出错。

最后,因为我们获取的随机数是从0开始的(因为字符串的其实位置是0),所以我们不用加上起始数。

到这里大家能够看出来,随机数公式很简单,我们只需要把相应的函数和数值代入公式中,就能够实现随机数的获取了。

第三步,获取到随机数字之后,我们要把“NumberText”中的清除,以免重复获取。

我们为刚才的动作,再选定“NumberText”这个元件,设置它的值为“[[n.replace(This.text,”))]]]”。

这里的n仍然是一个局部变量,获取到“NumberText”的元件文字。

然后,我们通过n.replace()这个函数将当前按钮的文字(This.text),从“NumberText”元件的元件文字中清除掉,也就是替换为空值(”)。

这一步完成后,大家可以点击预览按钮,我们能够看到数字按钮“Num”上出现了一个随机数字(每次刷新页面都不同),并且元件“NumberText”的元件文字中对应的数字消失了。

第四步,我们点击数字按钮“Num”时,要让光标所在的文本框叠加这个数字。

光标所在的元件,叫焦点元件。

所以,我们在元件“Num”的【鼠标单击时】添加交互,设置“焦点元件”的文字值。

这个值我们填写“[[f]][[This.text]]”。

This.text是当前数字按钮上的文字。

f是一个局部变量,获取的是【焦点元件文字】。

这一步完成之后,大家也预览一下这个原型,点击文本框光标进入之后,我们就可以点击数字按钮输入数字了。

不过,这里有个bug,就是点数字按钮时,不要点中间,点四周边缘之内的位置,你会发现……

我了个 艹!不但没搞进去,还弄了自己一身墨墨迹迹的。真特么是双击666啊!

这是因为矩形这个元件,自身能够获取到焦点,所以变成了焦点元件。

那么,怎么解决这个bug呢?

我们需要一个不能获取焦点的元件,它叫热区。

覆盖一个同等大小的热区在数字按钮上。

那么,这样不就点不到数字按钮了吗?

没关系,我们可以让热区【鼠标单击时】通过【触发事件】的动作,重新触发数字按钮“Num”的【鼠标单击时】交互。

这样就完美了,怎么点都不会再出现刚才的情况!

接下来,我们把数字按钮“Num”和热区一起选中,然后复制多次,变成多个按钮。

注意:一定一起选中复制,不一起选中复制的话,会失去交互的关联(不服你试试)。

第五步,为清空按钮“ClearButton”添加【鼠标单击时】【设置文本】于“焦点元件”为空值(什么都不输入,包括空格)的操作。

第六步,为退格按钮“Backspace”这个元件组合,添加退格的交互。

退格实际上是每次截取字符串,截取的长度是当前长度减1。

所以,我们为退格按钮添加【鼠标单击时】的交互,【设置文本】于“焦点元件”为值“[[f.substr(0,f.length-1)]]”。

f为局部变量,里面保存的是【焦点元件文字】。

f.substr()表示对f这个局部变量中的内容进行截取,截取起始位置为0,即从开头进行截取,截取的长度是f中内容的长度减一(f.length-1)。

第七步,完成了以上两步,我们也要给清空按钮(ClearButton)和退格按钮(Backspace)覆盖上热区,并且添加相关【触发事件】的交互。

此处以退格按钮(Backspace)为例。

第八步,数字键盘整体能够显示和隐藏。

我们把数字键盘所有的内容(包括上方的收起按钮和矩形)全选,然后点击鼠标右键,在菜单中选择【转换为动态面板】,并且给这个面板设置一个名称为“KeyboardPanel”。

然后,将这个动态面板和数字元件“NumberText”都设为隐藏。

在文本框【获取焦点】时,我们添加交互,显示动态面板“KeyboardPanel”

在收起按钮【鼠标点击时】设置动作【隐藏】动态面板“KeyboardPanel”。

第九步,每次键盘显示的时候,数字键盘的数字排列顺序都要随机改变。

每次获取一遍随机数字后,元件“NumberText”的文字都会被一一清除,为了保证下一次随机数字的获取,我们要在动态面板“KeyboardPanel”【显示时】,重置“NumberText”上的文字为“0123456789”。

然后,动态面板“KeyboardPanel”【显示时】再添加交互,通过【触发事件】的动作重新触发每个“Num”元件的【载入时】交互。

这样就能够在键盘显示的时候,重新获取一遍不重复的随机数字。

 

以上,就是整个案例的实现过程。

假使你没有学会,也没关系,把它复制到你的项目中改改样式就能重用了。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/random_keyboard.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 随机数字键盘的实现

喜欢 (8)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 老师,这次好长啊。一口气拨弄了15分钟,才恍然大悟,原来...........
    大楼2017-09-08 15:02 回复
  2. 小楼老师,平时画原型的时候需要一些设计规范,iOS和Android的网上已经很多了,但是web的设计规范比较匮乏,作为外行并不是特别清楚标准,希望你如果有时间的话能整理一下web设计规范
    暮夕2017-09-08 15:59 回复
  3. 小楼一夜听春语
    额...
    小楼一夜听春语2017-09-11 10:56 回复
  4. 为什么我的热区设置完触发事件之后,取到的值是undefined?
    生来就腼腆2017-09-11 17:06 回复
    • 小楼一夜听春语
      升级软件
      小楼一夜听春语2017-09-12 11:01 回复
      • 软件升级,问题已解决。感谢老师
        生来就腼腆2017-09-12 16:32 回复