汉字拼音首字母查询(非JS版)

上图就是我们要实现的目标:输入一个汉字能够查到它的拼音首字母。

实际上,明白了实现原理之后,通过汉字查拼音、查声母都是可以实现的。

关键在于有没有一个能够使用的源数据。

我们先来看看元件的准备工作。

上面这张图,大家能够看到这个案例使用的所有元件。

最关键的就是命名为“PinYin”的这个元件,它的文字包含了所有的文字以及对应的拼音首字母。

源数据下载:http://downloads.iaxure.com/pinyin.txt

大家可以下载源数据文件,复制里面的内容,粘贴到Axure编辑区中即可。

我们能够看到源数据的格式有一定的规律:[相同拼音首字母的所有文字][拼音首字母][逗号]......

那么,试想一下,当我们输入一个文字点查询时:

1、查询到汉字在源数据中出现的位置;

2、从查询到的位置向后查询逗号所在的位置;

3、获取到逗号所在位置前一位的拼音首字母。

完美!

所以,当我们准备好元件(注意将元件“PinYin”缩小尺寸后隐藏),就可以添加交互了。

交互如上图所示:

查找按钮“Search”【鼠标单击时】,添加用例与动作:【设置文字】于元件“Result”为一个公式...

具体公式是什么样子的呢?

如下图所示:

公式的完整内容是:“汉字的首字母是:[[p.charAt(p.indexOf(',',p.indexOf(w))-1)]]”。

简单说明一下:

  • “p”和“w”是两个局部变量,分别存入了源数据和输入的汉字内容;
  • “p.charAt()”能够获取指定位置的字符;
  • “p.indexOf(w)”能够获取汉字在源数据中出现的位置。
  • “p.indexOf(',',p.indexOf(w))-1”能够从汉字位置开始向右查找逗号所在的位置,找到的位置减1就是拼音首字母的位置。

这里值得一提的是“indexOf()”这个函数,它能够由左至右的从一个字符串中查询参数字符串出现的位置,它有两个参数,分别是“被查询的字符串”和“查询的起始位置”,如果没有提供第二个参数默认从最左侧向右查询。

好了,到这里这个案例就完成了。

希望大家能够从这个案例中学习到有用的知识点。

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

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


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

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

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


转载请注明:Axure原创教程网 » 汉字拼音首字母查询(非JS版)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址