微信小程序中实现随机验证码的实例代码呈现

why 323 2024-08-05

本篇文章给大家带来的内容是关于微信小程序实例:实现随机验证码(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信小程序中实现随机验证码的实例及代码呈现

小程序上经常会有一些注册 申请页面需要用到随机验证码。具体实现方法不多说 直接上代码

1

2

3

4

<view class=&#39;yanzhengma&#39;>

     <text class=&#39;left&#39;>{{code}}</text>

     <text class=&#39;right&#39; bindtap=&#39;huanyizhang&#39;>换一张</text>

 </view>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.yanzhengma {

    height: 100rpx;

    display: flex;

    align-items: center;

    justify-content: center;

}

 

.yanzhengma .left {

    font-family: Arial;

    font-style: italic;

    font-weight: bold;

    border: 0;

    letter-spacing: 3px;

    font-size: 18px;

    background-color: #ccc;

    padding: 10rpx;

    margin-right: 20rpx;

    color: blue;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

Page({

 

    data: {

 

    },

 

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function(options) {

    //刚进入页面随机先获取一个

        this.createCode()

 

    },

    huanyizhang(){

        this.createCode()

    },

    createCode() {

        var code;

        //首先默认code为空字符串

        code = &#39;&#39;;

        //设置长度,这里看需求,我这里设置了4

        var codeLength = 4;

        //设置随机字符

        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, &#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;);

        //循环codeLength 我设置的4就是循环4次

        for (var i = 0; i < codeLength; i++) {

            //设置随机数范围,这设置为0 ~ 36

            var index = Math.floor(Math.random() * 36);

            //字符串拼接 将每次随机的字符 进行拼接

            code += random[index];

        }

        //将拼接好的字符串赋值给展示的code

        this.setData({

            code: code

        })

    },

 

 

 

 

})


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中 input 标签的具体使用方式与代码展示
下一篇:微信小程序里一种简单的 Tab 可滑动切换方式的实现及代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~