Axure怎么制作带百分比进度条的投票系统?
进度条,应用也比较广泛,这里提供一则带百分比的进度条案例,分享给大家
效果如下(搞不定百度的gif压缩了,上传的gif效果严重失真,咳~):
1、为了说明效果,特意放置了3条进度条,以示不同比例的效果,这里仅以一条进度条做范本,如需其他数量进度条可以按“复制+黏贴”方式实现,无非再修改下颜色即可~
2、“进度条”所需的素材不多:2个矩形和2个文本标签即可,如下图所示:
3、按以下要求设置:
1)设置“文本标签“名称(标识):百分比
2)设置“文本标签“名称(标识):参数;文本内容:249(数值可随意)
3)设置“矩形”名称(标识):总量;尺寸:500*10;填充色:#F0F0F0(可随意)
4)设置“矩形”名称(标识):颜色进度条;尺寸:10*10;填充色:#C8C8AD(可随意)
4、按下图布局方式组合:
5、这里只需针对“矩形:颜色进度条“做交互效果,设定相关动作:
6、以“矩形:总量“长度为总长度;设定总量是500;参数可任意设置小于500的任意数字;设定一个全局变量num,记录百分比的数值
7、动作1:设置“矩形:颜色进度条“的长度
设置"文本框:参数"的内容(即数值)为局部变量LVAR1
设置"文本框:总量"为局部变量LVAR2
所以”矩形:颜色进度条“的长度为:[[LVAR1/500*LVAR2.width]]
8、动作2:计算百分比
1)计算百分比
设置"文本框:参数"的内容(即数值)为局部变量LVAR1,所以计算得”百分比“的数值为:[[LVAR1/500*100]]
(原本到这里可以结束了,但实际情况会发现,计算出来的数值,会有很多小数点,哈哈,这就不美观了)
2)百分比格式化:保留2位小数格式化用到的函数:[[num.toFixed(2)]]
3)设置“文本标签:百分比”为计算所得的数值([[num.toFixed(2)]]%)
9、“矩形:颜色进度条“的所有动作如下图所示:
10、到这里就设置结束了,很是简单。一切设置正确,效果就如下:
以上就是Axure制作带百分比进度条的投票系统的教程,希望大家喜欢,请继续关注脚本之家。
相关推荐:
相关文章
- c4d怎么建模厚厚的云朵?c4d中想要建模一块大大的云朵,该怎么建模呢?下面我们就来看看c4d逼真云朵的制作方法,很简单,需要的朋友可以参考下2019-08-06
如何给GIF动态图添加水印?使用闪电GIF制作软件添加水印的方法
闪电GIF制作软件支持录制和制作GIF动态图片,支持为动态图片添加水印,本文将会介绍为动态图片添加水印的方法,需要的朋友可以阅读本文参考一下2019-08-06- 闪电GIF制作软件支持录制gif动态图,支持将图片转换成动态图等等,本文中介绍的是使用该软件录制动态图的方法2019-08-06
如何把图片制作成GIF动态图?使用闪电GIF制作动态图的方法
闪电GIF制作支持屏幕录制的GIF制作软件,软件支持制作高质量的GIF图,同支持导出多种类型的文件,本文中介绍的是使用这款软件将图片制作成gif的方法2019-08-06Acme CAD Converter 2019如何激活?DWG转换软件安装汉化激活教程
Acme CAD Converter 2019一款不错的cad图像查看转换工具,主要是将DWG格式的图像文件转换成PDF、WMF、JPEG等格式,本文中介绍的是该软件的安装汉化激活方法,需要的朋友不2019-08-06- C4D怎么制作缓缓散发光线的圆环?c4d中想要制作一个类似太阳发光的效果,该怎么制作这个光线缓缓浮动的效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下2019-08-06
- C4D怎么建模弹簧摆件并添加贴图效果?C4D中想要创建一个弹簧摆件,该怎么创建并添加贴图效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下2019-08-06
- C4D怎么快速创建低面结构效果带闪电的云朵?LowPoly多边形风格很受欢迎,想要创建一个LowPoly风格的带有闪电的云朵,该怎么创建呢?下面我们就来看看详细的教程,需要的朋2019-08-05
- UG怎么测量零件的周长尺寸?UG建模的零件,想要测量周长来计算加工费,该怎么测量零件的周长尺寸呢?下面我们就来看看详细的教程,需要的朋友可以参考下2019-08-05
FX Cartoonizer(图片转换工具)如何激活 FX Cartoonizer安装及激活教程
FXCartoonizer是一款功能强大简单实用的图片转换工具。FXCartoonizer可以快速将图片转换为卡通效果,并且在转换之前还可以进行多种图像调整操作2019-08-07
最新评论