本节需要做的登录页如下:
该页面我们复习可以的值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应的登录区域,此时我们创建一个页面命名为登录注册页,并且设置水平和垂直对其为居中:
接着我们创建一个行,命名为登录框,并且需要设置这个行的宽高为 500*300,水平方向对其为居中:
接着我们创建一个行,命名为标题,在内部创建一个文本,编写文本内容为登录,接着设置这个标题的的水平分享垂直居中,高度为包裹,并且还可以设置一定的内边距:
接着再创建一个行命名为手机号验证,这个框用于存放手机号以及按钮,此时也需要设置这个框的水平方向的对齐为居中、高度为包裹:
接着在这个行内创建两个元素,一个是输入框一个是按钮:
需要设置成以上形式,需要去掉对应元素的外边框属性,比清切使其统一高度,在此设置了两个元素的高度均为40、圆角取消:
接着按照此方法一次创建其他内容:
此时由于其内部的每一个行的水平内容都是设置为居中,我们需要内部元素的宽度一致才能对其,在此验证码输入框的宽度要等于手机号码和发送按钮宽度的综合。
接着我们需要实现发送验证码的倒计时效果。
该效果需要点击发送按钮后,发送按钮出现发送验证码的倒计时,此时我们可以分析倒计时的逻辑,是定时的给某个值减1,那么定时执行任务那我们就需要使用一个触发器,在此我们创建一个定时器命名为登录验证码倒计时触发器:
接着我们再创建一个变量命名为登录倒计时,用于存储倒计时的秒数,并且给予默认值为60:
随后 我们给予发送按钮创建一个事件,这个事件用于触发倒计时任务的触发器:
触发完毕后,在触发器中给予事件,触发后用于存储倒计时秒数的变量减1:
那么接下来如何使文本内容更改为描述呢? 、 此时只需要设置对应发送按钮的文本值即可:
接下来再设置触发器的触发时间间隔为 1s 即可:
此时预览我们可以发现倒计时已经实现:
此时我们等到倒计时到0,发现倒计时内容还会继续往下减,那如何进行限制?
此时只需要在触发器中,添加条件,当秒数已经小于1时,那么发送按钮的文本就更改为发送:
但是此时还会出现一个问题,当前触发器还未停止,登录倒计时依旧在减1,此时还需要在小于0时停止当前触发器并且我还需要给予原本的秒数为60即可:
此时我们还需要完成一个限制,就是在点击发送按钮时其实一直在触发触发器,此时还需要添加一个条件,当倒计时描述为60时才可以触发当前的发送按钮事件:
否则在调用发送按钮的时候就会一直响应发送短信的服务,这样是不好的。