手把手教你如何使用Axure实现倒计时效果

最新推荐文章于 2023-09-15 23:51:27 发布
最新推荐文章于 2023-09-15 23:51:27 发布
阅读量2k 收藏 6
点赞数 2
文章标签： Axure 倒计时效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43173093/article/details/103142943
版权

我们经常看到一个场景，当点击某个按钮之后，旁边就会显示倒计时几秒后可以重新点击。这就是倒计时效果。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
直接开始：

一、准备

添加全局变量：项目-全局变量-添加 time 值为60
准备一个矩形，添加文字：获取验证码。
准备一个动态面板，设置为两个
准备一个文本标签，不要输入字，放在一旁

给各个组件命名
在这里插入图片描述

在这里插入图片描述

二、设置交互

在动态面板上设置交互条件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在矩形上设置交互，自己设置禁用样式
在这里插入图片描述

完成

我想吃红烧猪蹄
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
图文详解-如何用Axure做一个倒计时功能按钮
zzlbobo的专栏
03-28 4728
本篇主要给大家讲一下如何用Axure巧妙简单的实现一个倒计时功能。 demo地址： http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd 需要更详细学习的同学可以看下面文章。偷懒的同学可以直接在demo里复制出想要的部分即可使用了。 1、把主要元素进行排版设计； 这里每个人有每个人的习惯，没有一个标准，只是将主要元素进行组织后加以排版。大家发现并没有获取
Axure的简单操作（倒计时使用变量）
sunshine_hl的博客
07-23 1万+
Axure中的倒计时（使用变量）
手把手教你用Axure制作连连看游戏
02-26
某日，闲来无事，无聊的翻看着电脑中的APP图标，忽然萌生一个想法：用Axure原型制作一个连连看类型的游戏原型，于是说做就做，打开AxureRP7，开始搞。一天，两天。。。（由于只有业余时间搞）。。。五天，原型终于搞定。期间经过了不同实现方法的尝试、逻辑的梳理、原型的测试等等等。。。。开始界面：点击PLAY按钮即可进入游戏游戏界面：点击翻开图片，图片等待将近1s的时间后自动恢复，如果依次翻开的两个图片如果相同，这两个图片则自动消失，显示OVER字样结束界面：点击REPLAY可以重新开始游戏补充一些废话，做事情要有始有终，所以原型设计也是这样，要有头有尾。这个过程真的不是那么顺利，从开始只是有一
使用Axure制作倒计时效果.rp
10-14
使用Axure制作倒计时效果
Axure rp9 倒计时按钮的设置
weixin_58496646的博客
06-30 1252
点击添加用例，双击用例一，添加变量，选择变量值，再选择倒计时（OnLoadVariable）的值不等于0，相当于图三显示的条件，当前变量值不等于0时，禁用当前元件，也就是不能点击，再设置下一步设置设置文本，将当前文本从获取验证码变成变量值减一秒后重新获取。此时再将该变量的值等待一秒后减一，之后再设置当这些条件成立时会触发事件。第二步我们需要设置的是当变量值为0的时候。创建一个按钮，对按钮点击进行交互，选择点击或轻触，再双击箭头所指，弹出图二交互界面；图2，3，4，5，6，7，8 交互栏。
Axure教程——循环倒计时
weixin_43516258的博客
06-30 1514
本文介绍的是用Axure制作的循环倒计时
Axure绘制倒计时
产品阿强
06-02 628
Axure如何绘制倒计时呢？
axure怎么做5秒倒计时_如何用Axure做倒计时，由分到秒？
weixin_35737757的博客
01-26 673
回答：1、 将所需元件全部准备好，并按照上图要求设置完毕。2、 倒计时的持续需要循环的支持，简单来说就是利用动态面板的显示和隐藏事件来实现循环，在面板显示时改变相应数值，然后让面板隐藏激发面板隐藏事件，面板隐藏时等待1000毫秒用来实现读秒效果，再让面板显示激发面板的显示事件，如此循环往复，就达到效果了。3、 在显示面板改变数值的操作中，我们需要按上图中的多个条件进行判断，并执行相应的改变数值的操...
Axure原型设计累加器计时器设计效果（职业院校技能大赛物联网技术应用项目原型设计题目）
weixin_59042297的博客
09-15 2346
1.本文所讲的是Axure 原型设计，使用软件是Axure RP 8版本，若您有需要在资源中下载；2.本文所讲的内容来源自——全国职业院校技能大赛“物联网技术应用”赛项原型设计题目；3.本文所讲的原型设计素材会发布到我的资源当中，若有需要可以在我的资源中下载；4.本文讲解的操作步骤均是Axure RP 8版本，原则上8以上版本操作步骤会跟本文大有不同，所以需要者可以学习其中交互方法，或直接见上行文字下载使用；5.Axure原型设计内容以收入到我的“Axure原型设计”专栏当中；
Axure之倒计时效果
LVXIANGAN的专栏
03-22 5201
Axure倒计时 本内容介绍使用函数和动态图层来实现倒计时，其主要思路是： 不断使动态图层进行隐藏/显示并使用隐藏/显示的触发事件。 例如：当触发隐藏事件的时候延迟一秒后把文本的值减一并把再使图层显示，一旦显示马上又回到隐藏状态便可实现倒计时功能。主要流程如下：     ==============================================
Axure倒计时/原型倒计时
06-02
Axure绘制倒计时，使用全局变量实现，非常好用
Axure RP9 制作动态时间、倒计时以及动态变化数字效果
07-03
1.动态时间可以放在原型的产品设计图上，使得预览效果更具系统的真实性； 2.动态数字可以自定义颜色和字体效果，放在大数据可视化大屏上，动态效果更加灵动； 3.
Axure倒计时效果案例.rp
06-01
Axure倒计时效果案例.rp
axure 文本提示显示5秒后消失动画+图片自动旋转动画
yangyun_1999的专栏
09-25 4698
文本提示显示5秒后消失动画制作效果如上，配置如下： 1、载入整个网页时，隐藏元件，元件名称“文件生成中tip” 2、点击【导出CSV文件】按钮，添加鼠标点击时的动作显示-旋转-等待-隐藏动画 ①显示元件，逐渐200ms ②旋转图标，代表生成中 ③添加元件的停留时间，与图标旋转时间相同 ④再次隐藏元件，逐渐消失，消失的速度可以比显示的速度块 搞定整个动画 ...
如何用Axure RP 8.0 制作类似时间60秒、10秒等倒计时效果
热门推荐
chali22的专栏
09-13 2万+
在原型设计的时候经常会用到时间倒时计，比如点击获取验证码后等待的60秒、120秒，或者页面等待10秒跳转到下一个页面等，这都属于倒计时的范畴，这里把用Axure成功制作倒计时的功能给大家分享一下。以在页面上倒计时10秒进入下一个页面为例： 方法/步骤 1.拖出来两个文本标签，一个在里面写入数字10，并命名为time，另一个写入文字“秒后自动进入下个页面”
Axure之倒计时简单实现
阿毅
03-13 3676
开心一笑【看大家都在抵制韩国，我翻遍家里也没找到有啥韩货可砸的，最后下楼把楼下姓韩的邻居打了一顿，因为他名叫韩国胜。】提出问题Axure如何实现倒计时和动画切换???解决问题此文只为一人而写……1.新建一个全新的项目。2.在元件库里，拖入两个一级标题元件，分别写上“距离高考还剩” 和 “天” 这两个文字。 具体如下：3.在元件库里，拖入一个动态面板，宽度：50，高度：50。4.双击动态面板，在弹出
Axure的简单操作（倒计时基础版）
sunshine_hl的博客
07-23 3798
Axure倒计时基础版
Axure学习一
qq_42958527的博客
09-14 450
Axure软件学习 Axure是一个专业的快速原型设计工具，其主要功能是让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或者web网站的线框图、流程图、原型和规格说明文档。 元件 Default包括基本元件、表单元件、菜单/表格、标记元件 ...
营销策划 -2024非遗大展预热引流策划方案.pptx
最新发布
07-13
营销策划 -2024非遗大展预热引流策划方案.pptx
axure实现倒计时
09-07
在Axure中实现倒计时可以通过以下步骤完成： 1. 创建一个文本框或标签控件，用于显示倒计时的时间。 2. 添加一个动态面板，作为倒计时的容器。 3. 在动态面板中添加所需的图形和样式，用于显示倒计时效果。 4. 在Axure的交互编辑器中，选择倒计时文本框或标签控件，并在交互面板中添加一个定时器事件。 5. 设置定时器事件的触发条件为“页面加载完成”或其他你所需的条件。 6. 在定时器事件中使用Axure自带的表达式和函数来更新倒计时文本框或标签控件的显示内容。 例如，可以使用表达式"[[LVAR1-1]]"来将倒计时文本框当前值减1，并将结果赋给倒计时文本框。 这样，当页面加载完成时，定时器事件会触发并更新倒计时文本框的显示内容，从而实现倒计时效果。你还可以根据需要进行其他自定义设置，如设置倒计时结束后的行为等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值