• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:可使用的计算器demo制作(下)

Axure教程:可使用的计算器demo制作(下)

作者: @五月 字体:[增加 减小] 来源:互联网

本文主要包含axure demo,axure做demo,axure计算器,axure制作计算器,axure教程视频等相关知识, @五月 希望在学习及工作中可以帮助到您

上篇文章《Axure教程:可使用的计算器demo制作(上)》,讲完了数字键0、1…9以及其他几个键的事件设置,这篇文章补充讲完+/-键、%键的事件写法,完成整个计算器demo的制作,建议先看完上一篇。下面继续完成事件设置~

1、%键的事件设置

点选%键,鼠标单击时,设置屏幕文字为[[LVAR1%100]],其中LVAR1为局部变量,表示原屏幕文字。

解析:计算器里%键表示的是求屏幕数字的百分比,所以点击时,设置原屏幕文字除以100即可;值得说明的事,在Axure运算函数中,%运算代表的是求余数(上篇文章讲到的,+号代表加法运算,-代表减法运算,*号代表乘法运算,/号代表除法运算),如设置单击某按钮,设置按钮文字为[[7%2]],触发事件时,则按钮文字会变为1。

2、+/-键的事件设置

点选+/-键,鼠标单击时,编辑条件,设置条件当屏幕文字不包含-时,设置屏幕文字为-[[LVAR1]],其中LVAR1表示原屏幕文字。

接着,继续添加+/-键的单击用例case 2,设置屏幕文字为[[LVAR1.slice(1,LVAR1.length)]],其中LVAR1表示原屏幕文字。

解析:关于+/-键写法的思路,+/-键其实就是设置屏幕文字为原屏幕文字的相反数。当屏幕为正数时(即屏幕文字不包含-号情况),在原屏幕文字前加上-号,否则(即当屏幕文字包含-号情况),去除原屏幕文字前方的-号,保留-号后面的文字即可(此时需要运用到两个字符串函数,解析见下方)。

slice(start,end)函数:此为截取字符串函数,表示截取某字符串从第n位,到第m位的字符,返回的结果为一串新的字符串。完整写法为[[LVAR.slice(start,end)]],LVAR表示原字符串文字,satrt表示开始截取的位数n,end表示结束截取的位数m,返回结果新字符串包括原字符串第n位的字符,但不包括第m位的字符,且字符串从0开始计位,例如:字符串ab165,第0位为a,第1位为b,第2位为1…以此类推,若此时要从该字符串里截取出新的字符串b16,则写法应为[[LVAR1.slice(1,4)]],其中LVAR1为局部变量代表原字符串ab165文字。

length函数:此为字符串长度函数,求取某字符串的长度,返回的结果为一个数字。完整写法为[[LVAR.length]],其中LVAR代表所求的字符串文字,如上述字符串ab165,求其长度具体写法为[[LVAR1.length]],LVAR1为局部变量代表字符串ab165文字,返回结果为5。

3、旧键事件修改完善

数字键1、2…9事件修改完善

以数字键7为例,点选数字键7,添加单击时用例case 3,编辑条件,当屏幕文字等于“-0”时,设置屏幕文字为-[[This.text]],并将case 3上移到事件最上方(右击case 3事件,选择事件上移动,或直接点击case 3整个事件,按住鼠标拖动到事件最上方),数字键7完整事件见上图右侧红框。

删除1、2、3、4、5、6、8、9数字键的事件,将数字键7的单击事件复制到这些数字键,完成1到9数字键的最终事件。

解析:因为+/-键事件的写入,存在了当屏幕文字为-0的特殊情况(计算器默认屏幕文字为0,默认判断条件为替换,此时点击+/-键,则屏幕会出现该情况),在该情况下,点击数字键1、2…9等,应将0替换为所点击的数字,若此时依旧用原事件,则屏幕显示为-0时,点击7,则屏幕文字会显示为7,与现实计算器效果不符合。

事件的执行是由上往下执行的,以上述数字键7为例,会先执行屏幕文字为“-0”情况,如果屏幕文字不为“-0”,则继续执行判断文字为“替换”情况,如果判断文字不为“替换”,再继续执行判断文字为“连接”情况的事件。

数字键0事件修改完善

点选数字键0,添加单击事件新用例case 3,编辑条件当屏幕文字为“-0”时,设置屏幕文字为“-0”,并将case 3移动至事件最上方,原理与数字键7相同。

小数点键事件修改

点选小数点键,添加单击事件新用例case 2,编辑条件当判断文字等于“替换”时,设置屏幕文字为“0.”,设置判断文字为“连接”,禁用小数点,并将case 2事件上移,完整小数点事件见上图右侧红框。

解析:原来的写法存在bug,即当完成一次算术运算后,如3+4,点击等号键后,屏幕文字为“7”,判断文字为“替换”,若沿用之前写法,此时点击小数点键,则屏幕文字将显示为“7.”,与现实计算器效果不符。添加判断条件,则可避免该bug出现。

完成上述所有操作,则一个完整有效的计算器demo就全部完成。

通过这个实例告诉我们,在原型的设计过程中,原型组件的事件不可能一蹴而就,组件与组件之间,事件可能存在相互影响的关系,只有通过一次次逻辑思考,进行修改完善,才能达到你期望的效果。

所以,原型设计的核心思想是:产品做什么,逻辑与判断条件是什么,它侧重表达业务需求;与之相关的还有一个概念“交互设计”,其核心思想是:产品怎么做,它侧重点在于用户体验设计。

您可能想查找下面的文章:

  • Axure教程:可使用的计算器demo制作(下)
  • Axure教程:可使用的计算器demo制作(上)

相关文章

  • Axure教程:12306图片验证码的实现(随机可验证)
  • Axure教程:滑动鼠标页面自动切换(一)
  • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 自定义微信元件库:Axure基本元件的应用(下)
  • Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
  • 用Axure 实现“打飞机”,骚年,来一发(下)
  • Axure教程-锚点滚动效果
  • 轮播banner简便axure实现方式
  • Axure实例:顶栏和侧边栏的固定和窗口自适应
  • Axure教程:移动端原型页面横纵向滑动同时实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure中继器:制作可交互的“APP音乐播放列表页”
    • Axure教程:用中继器和日期函数实现万年历
    • 自定义微信元件库:Axure基本元件的应用(上)
    • Axure RP8 动态面板之折叠和展开(例如菜单栏)
    • Axure教程:实现倒计时获取验证码效果
    • 如何用Axure快速制作APP交互原型
    • Axure教程 - 为原型设计添加点动画效果
    • Axure教程:原型设计之弹幕
    • Axure教程:移动端原型如何适配不同分辨率的手机?
    • Axure教程:怎样做低保真轨迹追踪与回放

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有