三、登录页制作《iVX低代码/无代码个人博客制作》

一、登录页实现

本节需要做的登录页如下：

在这里插入图片描述

该页面我们复习可以的值，首先设置整个页面页面的垂直和水平对其为居中，随后一个容器包裹对应的登录区域，此时我们创建一个页面命名为登录注册页，并且设置水平和垂直对其为居中：

在这里插入图片描述

接着我们创建一个行，命名为登录框，并且需要设置这个行的宽高为 500*300，水平方向对其为居中：

在这里插入图片描述

接着我们创建一个行，命名为标题，在内部创建一个文本，编写文本内容为登录，接着设置这个标题的的水平分享垂直居中，高度为包裹，并且还可以设置一定的内边距：

在这里插入图片描述

接着再创建一个行命名为手机号验证，这个框用于存放手机号以及按钮，此时也需要设置这个框的水平方向的对齐为居中、高度为包裹：

在这里插入图片描述

接着在这个行内创建两个元素，一个是输入框一个是按钮：

在这里插入图片描述

需要设置成以上形式，需要去掉对应元素的外边框属性，比清切使其统一高度，在此设置了两个元素的高度均为40、圆角取消：

在这里插入图片描述

在这里插入图片描述

接着按照此方法一次创建其他内容：

在这里插入图片描述

此时由于其内部的每一个行的水平内容都是设置为居中，我们需要内部元素的宽度一致才能对其，在此验证码输入框的宽度要等于手机号码和发送按钮宽度的综合。

二、倒计时实现

接着我们需要实现发送验证码的倒计时效果。

该效果需要点击发送按钮后，发送按钮出现发送验证码的倒计时，此时我们可以分析倒计时的逻辑，是定时的给某个值减1，那么定时执行任务那我们就需要使用一个触发器，在此我们创建一个定时器命名为登录验证码倒计时触发器：

在这里插入图片描述

接着我们再创建一个变量命名为登录倒计时，用于存储倒计时的秒数，并且给予默认值为60：

在这里插入图片描述

随后 我们给予发送按钮创建一个事件，这个事件用于触发倒计时任务的触发器：

在这里插入图片描述

触发完毕后，在触发器中给予事件，触发后用于存储倒计时秒数的变量减1：

在这里插入图片描述

那么接下来如何使文本内容更改为描述呢？ 、 此时只需要设置对应发送按钮的文本值即可：

在这里插入图片描述

接下来再设置触发器的触发时间间隔为 1s 即可：

在这里插入图片描述

此时预览我们可以发现倒计时已经实现：

在这里插入图片描述

此时我们等到倒计时到0，发现倒计时内容还会继续往下减，那如何进行限制？

在这里插入图片描述

此时只需要在触发器中，添加条件，当秒数已经小于1时，那么发送按钮的文本就更改为发送：

在这里插入图片描述

但是此时还会出现一个问题，当前触发器还未停止，登录倒计时依旧在减1，此时还需要在小于0时停止当前触发器并且我还需要给予原本的秒数为60即可：

在这里插入图片描述

四、触发限制

此时我们还需要完成一个限制，就是在点击发送按钮时其实一直在触发触发器，此时还需要添加一个条件，当倒计时描述为60时才可以触发当前的发送按钮事件：

在这里插入图片描述

否则在调用发送按钮的时候就会一直响应发送短信的服务，这样是不好的。