五、登录页倒计时制作《仿淘票票系统前后端完全制作(除支付外)》

一、登录功能的实现

首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/

上一节我们已经完成了基本页面的制作,在本节中,我们将会开始完成登录功能的实现。

实现登录功能需要增加一个用户组件:
在这里插入图片描述
这个用户组件是需要选择(点击)后台后才可以在左侧的组件面板中出现,当你选择了某个对象树中的组件后,主键面板将会出现当前空间能够添加的组件,在这里点击后台后将组件添加到项目之中:

在这里插入图片描述
此时咱们可以重命名私有用户组件为“用户”,使项目更加清晰:
在这里插入图片描述
接着点击用户添加的组件,咱们可以在弹出来的面板中查看当前组件的内容:
在这里插入图片描述

二、 获取手机短信

从内容上看,我们可以知道,当前组件就是一个数据库,存储了用户信息,但这个组件与常规数据库不同,用户组件自带了很多方法,可以使我们对用户的操作更加方便,例如就有我们等下需要使用到的“获取手机注册短信”动作。

此时咱们点击获取验证码文本,给这个文本添加事件:
在这里插入图片描述
添加点击事件后,动作选择的对象是用户组件对象,并且我们可以看到选择用户组件对象后,在动作中可以看到获取用户短信动作:
在这里插入图片描述
接着,选择获取短信验证码后,需要给当前动作传入对应的参数内容:
在这里插入图片描述
此时我们暂时不需要使用图片验证码ID,咱们直接使用手机号进行注册,但是在此需要注意,我们在类型处需要选择是注册验证,若你在登录时获取验证码,需要更改此处的类型为登录验证:
在这里插入图片描述
在此还需要注意无需验证码选项需要更改为否:
在这里插入图片描述

手机号则为输入框中的内容:
在这里插入图片描述
此时获取验证码还需要进行充值,验证码服务并不是免费的,你充值5块钱做测试已经可以用很久很久了:
在这里插入图片描述
此时咱们输入手机号获取短信,成功获取:
在这里插入图片描述

三、 验证码倒计时

正常情况下,验证码应该是可以倒计时的,但是此时咱们的验证码并没有倒计时:
在这里插入图片描述
没有倒计时对用户并不友好,咱们需要制作一个用户倒计时的内容。首先倒计时一个从60秒倒计时到1秒的这一个过程,我们需要每次递减1,那么此时必然需要使用一个变量存储一个倒计时的量,随后使用触发器,使倒计时能够递减。

那么第一步创建一个变量存储倒计时的秒数:
在这里插入图片描述
此时还需要给与一个默认值 60:
在这里插入图片描述
接着创建一个倒计时的触发器,使其点击了发送验证码按钮后能够触发,触发后在触发器内部使倒计时变量能够每次减一:
在这里插入图片描述
随后设置触发的时间间隔为 1:
在这里插入图片描述
接着直接给这个触发器一个时间,当触发时,倒计时变量减1即可:
在这里插入图片描述
此时还需要使这个倒计时能够显示到点击的文本之上,这时你可能会觉得直接做数据绑定就可以了,但是如果你做数据绑定,那么那么按钮就不会一直显示“发送验证码”文本,所以此时咱们只需要直接添加一个动作,每次减一,更改对应文本的值即可:
在这里插入图片描述
最后在发送验证码文本处添加对触发器的响应,即可完成倒计时制作:
在这里插入图片描述
在这里插入图片描述

四、 出现的bug如何解决

此时我们发现倒计时可以到负数,那么如何解决这个 bug 呢?

那么此时我们就需要进行条件设置了,增加条件,在倒计时变量值大于0时才可以进行减值:
在这里插入图片描述
此时还有一个bug,当你重复点击这个文本时,将会频繁的发送验证码,咱们得做一个限制“当倒计时数为60时,也就是没有减值时可以发送”,那么条件如下:
在这里插入图片描述
此时还会存在一个问题,当倒计时变量小于等于0时,我们应该对这个变量重新赋值为60,并且也需要更改文本为原装,那么条件如下:
在这里插入图片描述
此时当倒计时数小于0后,还需要重新重置为原本的样子,最重要的还有一点,一定要当前触发器暂停,否则会一直触发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB统计分析与应用100】案例001:matlab使用Importdata函数导入文本txt数据

配套实验数据包下载:链接:https://pan.baidu.com/s/1T4zUFmCIOCKIisdGRQPddg?pwdddi1 文章目录1. 调用importdata函数读取文件中的数据2. 调用importdata函数读取文件数据,返回结构体变量x3. 调用importdata函数读取文件中的数据&#xff0c…

MAUI 入门教程系列(3.多目标平台)

前言如果您是第一次创建MAUI项目, 并且在之前也并没有接触过Xamarin.Forms应用, 或许你并不知道MAUI的强大优势, 在原来的Xamarin.Forms当中, 我们基于不同平台的项目他们是单独维护的。如下所示:因为如此, 你需要维护不同平台的项目。包括每个项目当中包含的资源、图像、属性定…

六、注册页功能制作《仿淘票票系统前后端完全制作(除支付外)》

一、注册块内容制作 首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/ 上一节已经知道了如何制作登录块内容,但是咱们先做还没有注册,所以就测试不了登录块功能,现在咱们同样的,在注册块中添加一个变量和一…

【MATLAB统计分析与应用100例】案例002:matlab使用xlsread函数读取excel中的数据

文章目录 1. 读取文件excel表中单元格A2:H4中的数据2. 读取excel第1个工作表中单元格A2:C3中的数据,将数据分别加1后返回3. 读取excel第1个工作表中单元格A2:H2中的数据,将读取到的数据分别加1,返回数值矩阵num,文本矩阵txt,元胞数组raw,变换后数值矩阵X1. 读取文件excel…

美图秀秀首页界面按钮设计(二)

本文实现美图秀秀首页中的按钮,它包含3张图片和一个文本。通过开发按钮,我们可以学到iOS的自定义控件,绘制图片和文本的知识。【声明:本博客只能用作学习用途,不得用于商业用途,图片资源均来自官方&#xf…

第三方免费加固横向对比

前言 基于java开发的android应用由于其语言的特性,所以很容易被反编译,虽然android提供了proguard,但是也只是增加了源码阅读的难度,其中业务逻辑依旧可以分析得出。有些人通过各种破解手段将apk文件破解、反编译,然后…

(02).NET MAUI实战 布局

1.概要既然要做实战开发会建项目之后就需要认识布局控件了&#xff0c;本篇文章分享.NET MAUI中的一些基础常用的布局控件。GridStackLayoutFalyxLayoutAbsoluteLayout2.详细内容(1)Grid语法&#xff1a;<Grid RowDefinitions"50,50,50,50" RowSpacing"10&qu…

[Javascript] Avoid Creating floats if they are not needed

https://channel9.msdn.com/Series/Practical-Performance-Tips-to-Make-Your-HTMLJavaScript-Faster/06?WT.mc_id13400-DEV-sitepoint-article24 转载于:https://www.cnblogs.com/yoyohappy/p/5884629.html

七、后台入口及添加影院实现《仿淘票票系统前后端完全制作(除支付外)》

一、登录后台窗口显示与跳转 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节已经完成了登录和注册功能&#xff0c;在这一节咱们将会实现对应的后台入口进入和一些后台功能的制作。 首先咱们需要记录一下登录的UID&#xff0c;因为咱们后台界面…

【MATLAB统计分析与应用100例】案例003:matlab调用smooth函数进行加噪数据的平滑处理

文章目录 1. 产生加噪正弦波信号,绘制加噪波形图2. 利用移动平均法对加噪信号进行平滑处理,绘制平滑波形图3. 利用lowess方法对加噪信号进行平滑处理,绘制平滑波形图4. 利用rlowess方法对加噪信号进行平滑处理,绘制平滑波形图5. 利用loess方法对加噪信号进行平滑处理,绘制…

八、影片添加页实现《仿淘票票系统前后端完全制作(除支付外)》

一、影片添加页 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一届影院添加页功能已经完成&#xff0c;这一节咱们实现影片添加页内容。 影片添加页如下&#xff1a; 该页面实现起来比较简单&#xff0c;点击图片后使用文件上传组件进行图片上传…

MAUI 通用权限框架(ABP)

简介众所周知, MAUI目前发布正式版本了, 那么对应, MAUI对应的ABP框架也应该马上出现, 这点也恰巧在我的预料之中, 所以在去年年底就开始着手Xamarin.Forms的ABP框架迭代。到目前为止,针对Xamarin.Forms 以及 WPF版本的 ABP框架已经在之前的文章当中给大家介绍过。那么本次主要…

《Matlab实用案例》系列Matlab从入门到精通实用100例案例教程目录(持续更新)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之《Matlab使用案例》 3. 专栏目录 【MATLAB统计分析与应用100例】案例001&#xff1a;matlab使用Importdata函数导入文本txt数据【MATLAB统计分析与应用100例】案例002&#xff…

Quartz2 定时器 《一》(概述)

为什么80%的码农都做不了架构师&#xff1f;>>> Quartz2 说白了&#xff0c;就是个功能比较完善的定时器&#xff0c;可以通过指定的时间执行指定的任务。 应用范围 a.比如让商城的活动&#xff08;对象&#xff09;在指定的时间&#xff08;定时&#xff0…

九、为影院添加影片《仿淘票票系统前后端完全制作(除支付外)》

一、数据获取 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节已展示了影院页&#xff0c;但是你点击影院页进入后将看不到任何数据&#xff0c;这是因为当前影院还未有添加的影片&#xff0c;本节之后将会从页面开始完成这个功能。 首先我们应…

大话领域驱动设计——基础设施层

概述基础设施层是整个系统的⽀持层&#xff0c;通过对第三⽅类库的调⽤或系统的抽象和集成来实现对其他层的⽀持。与传统架构不同在DDD中&#xff0c;数据库访问的具体实现&#xff08;仓储&#xff09;也被放在了基础设施层。在DDD的理念中&#xff0c;基础设施层是为领域和用…

【MATLAB统计分析与应用100例】案例004:matlab调用smoothts函数对金融时间序列数据进行平滑处理

时间序列数据进行平滑处理效果预览: Excel原数据部分预览: 1. 读取金融时间序列数据,绘制波形图 x = xlsread(examp03_02.xls); % 从文件examp03_02.xls中读取数据 price = x(:,4)

【MATLAB统计分析与应用100例】案例005:matlab调用medfilt1函数对加噪正弦波信号进行平滑处理

平滑效果预览: 文章目录 1. 产生加噪正弦波信号,绘制加噪波形图2. 调用medfilt1对加噪正弦波信号y进行中值滤波,并绘制波形图1. 产生加噪正弦波信号,绘制加噪波形图 t = linspace(0,2*pi,500); % 产生一个从0到2

十、为影院添加影片及座位安排《仿淘票票系统前后端完全制作(除支付外)》

一、选中添加功能完成 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 在上一节咱们已经完成了对应的准备工作&#xff0c;在这一节中&#xff0c;咱们只需要对其进行调用即可&#xff0c;调用前还需要处理这些数据&#xff1a; 首先选中时&#xff0…

遍历文件夹还原数据库SQL语句

/***** 遍历文件夹进行数据库还原 *******/---需要开启xp_cmdshell 如已经开启 可以略过 /***** Step 1 开启 xp_cmdshell Use Master GO EXEC master.dbo.sp_configure show advanced options, 1 RECONFIGURE WITH OVERRIDE GO EXEC master.dbo.sp_configure xp_cmdshell, 1…