微信小程序案例：完成隨機驗證碼（附代碼）

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

   <view class='yanzhengma'>
        <text class='left'>{{code}}</text>
        <text class='right' bindtap='huanyizhang'>換一張</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中文網其它相關文章！