微信小程式實例：實作隨機驗證碼（附程式碼）

這篇文章帶給大家的內容是關於微信小程式實例：實作隨機驗證碼（附程式碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

小程式上常常會有一些註冊 申請頁面需要用到隨機驗證碼。具體實作方法不多說直接上程式碼

   <view class=&#39;yanzhengma&#39;>
        <text class=&#39;left&#39;>{{code}}</text>
        <text class=&#39;right&#39; bindtap=&#39;huanyizhang&#39;>换一张</text>
    </view>

.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;
}

Page({

    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
    //刚进入页面随机先获取一个
        this.createCode()

    },
    huanyizhang(){
        this.createCode()
    },
    createCode() {
        var code;
        //首先默认code为空字符串
        code = '';
        //设置长度，这里看需求，我这里设置了4
        var codeLength = 4;
        //设置随机字符
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        //循环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
        })
    },




})

 相關推薦：

微信小程式實例：如何驗證碼的倒數計時計數（程式碼）

#微信小程式實例：如何取得和渲染資料（附程式碼）

以上是微信小程式實例：實作隨機驗證碼（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！