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

一、登录功能的实现

首先打开在线编辑器进入我们的项目: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…

TextView的部分点击事件和点击事件

1.在TextView中实现部分点击 我在activity中使用了clickablespan这个类,然后完全按照视频上的操作下来,发现点击时不响应,于是我便设置了电话的链接,发现这时点击 自己设置的区域就会响应,但是如果我把电话链接删了&am…

C语言试题四十之使字符串中尾部的*号不得多于n个;若多于n个,则删除多于的*号;若少于或等于n个,则什么也不做,字符串中间和前面的*号不删除。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

Meta http-equiv属性详解

Meta http-equiv属性详解 博客分类: Web综合HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content&am…

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

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

关于质量的联想:消费示范效应

IT业界有新闻说,根据可靠性数据研究专家Rescue.com发布的今年一季度可靠性报告,“五大电脑公司中,联想-IBM的分数高居首位,第二名是华硕,之前的可靠性冠军苹果跌落第三,东芝、惠普-康柏则排在第五”。大部分…

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

一、注册块内容制作 首先打开在线编辑器进入我们的项目: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…

C语言试题四十一之请编写一个函数,用来删除字符串中的所有空格。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

第三方免费加固横向对比

前言 基于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;因为咱们后台界面…

正则表达式 学习笔记4.3

下面看看逆序环视结构&#xff1a;publicclassGeneralSix { publicstaticvoidmain(String[] args) { String[] strings newString[]{"see","bee","tee"};String[] regexs newString[]{"(?<s)ee","(?<!s)ee"}; for…

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

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

C语言试题四十二之假定输入的字符串中只包含字母和*号。请编写函数fun,它的功能是:将字符串中的前导*号全部移到字符串的尾部。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

linux curl模拟登录网页

有时在批量抓取网站页面内容时&#xff0c;是需要处于登录状态的&#xff0c;否则无法获取。curl这个强大的工具可以完成这个工作。之前最好也先了解一下http POST方法&#xff0c;网站登录大都是用这个办法。本文基本上参考这篇文章,来自依云s Blog&#xff0c;是archlinux中文…

APP上架到各大应用商店的小总结

转自https://blog.csdn.net/niezhipeng8/article/details/79103436 想要把APP上架到应用市场都要先注册开发者账号才可以。这里的方法包括注册帐号和后期上架及一些需要注意的问题。注意&#xff1a;首次提交应用绝对不能随便删除&#xff0c;否则后面再提交会显示应用APP冲突…

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

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