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

Axure教程:实现倒计时获取验证码效果

作者: @走错路了 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure验证码倒计时,axure怎么做倒计时,axure60s倒计时,axure倒计时,axure如何做倒计时等相关知识, @走错路了 希望在学习及工作中可以帮助到您

在app注册或者登录时,一般需要验证手机号码,常用的方式就是向手机发送验证码。下面介绍在Axure中,通过动态面板切换、文本框文字改变两种方法实现这种效果。文章部分来源于其它网友,感谢分享。

daojishi

一、效果图

首先我们看一下效果图,如下:

11.gif

二、具体实现:

第一种方法:全局变量+矩形按钮+动态面板两种状态的切换

1、创建一个矩形(命名为button)、一个动态面板(命名为:option)、一个全局变量(命名为:timer),动态面板创建两个state。如下图:

1

2、为按钮创建“鼠标单击时”事件,为动态面板创建“状态改变时”事件

2

3、运行即可查看相关效果(底部查看效果)

第二种方法:动态面板+文本改变

1、创建一个动态面板(命名为:option),添加三个状态,分别为获取、数字、再次获取。三种状态下分别制作对应的原件显示,如下图:

3

45

6

2、为三个状态内原件,分别创建事件:

a、获取状态:“鼠标单击时”事件;数字状态:“文本改变时”事件;再次获取状态:“鼠标单击时”事件。如下:

73、运行效果如下:

1.gif

以上就是实现简单验证码倒计时效果。

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

  • Axure教程:实现倒计时获取验证码效果

相关文章

  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-14Axure教程:导航栏和广告悬停效果制作
  • 2017-06-14Axure8.0小案例:电动机原型
  • 2017-06-14Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
  • 2017-06-14Axure教程 | 知乎注册与登录原型
  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-13Axure中继器姊妹篇:列表页添加排序和筛选功能
  • 2017-06-13Axure教程:实现倒计时获取验证码效果
  • 2017-06-13Axure教程:原型设计之水泡导航栏
  • 2017-06-13Axure中继器:制作可交互的“APP音乐播放列表页”

文章分类

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

最近更新的内容

    • Axure实现多级联动下拉框
    • Axure教程:微信聊天列表原型制作(二)
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • Axure教程:中继器实现列表到详情页的数据传递
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • Axure8.0小案例:手把手教你画挖掘机
    • Axure 8.0 拖动滑块设置数字和日期
    • Axure教程:验证码原型制作实例
    • banner轮播axure最简易实现及手动切换
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动

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

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