在微信小程序中使用“隨機(jī)鍵盤”
發(fā)布時(shí)間：2018-05-08 10:55 所屬欄目：小程序開發(fā)教程
最近研究微信小程序，發(fā)現(xiàn)在手機(jī)上使用系統(tǒng)鍵盤非常不方便，一是按鍵太小，對(duì)于小學(xué)生來說，操作非常不方便；二是系統(tǒng)鍵盤反復(fù)切換影響界面布局。于是自己決定自己寫一個(gè)隨機(jī)的小鍵盤。
原理非常簡(jiǎn)單：拿“口算練習(xí)”來說，總共只設(shè)置四個(gè)數(shù)字輸入鍵和一個(gè)“Del”鍵，隨機(jī)從0-9這10個(gè)數(shù)字隨機(jī)顯示四個(gè)數(shù)字就足夠了，當(dāng)然這四個(gè)數(shù)字必須包含答案所含的數(shù)字。
如下圖中界面所示：習(xí)題為“9+77=？”，答案為86，先提出8和6，再?gòu)氖Ｏ碌?1234579八個(gè)數(shù)字中隨機(jī)取兩個(gè)數(shù)字，之后和8、6總共四個(gè)數(shù)字再進(jìn)行隨機(jī)排序，最后分別顯示在四個(gè)數(shù)字鍵上，OK！
生成“隨機(jī)鍵盤”的代碼如下：
- MakeNumBtn: function () {
- function getRandomArrayElements(arr, count) {
- var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
- while (i-- > min) {
- index = Math.floor((i + 1) * Math.random());
- temp = shuffled[index];
- shuffled[index] = shuffled[i];
- shuffled[i] = temp;
- }
- return shuffled.slice(min);
- }
- if (op === "+") {
- ans = A + B;
- } else if (op === "-") {
- ans = A - B;
- } else if (op === "×") {
- ans = A * B;
- } else if (op === "÷") {
- ans = A / B;
- }
- var nums = '0123456789'
- var arrAns = [];
- var temp = ans.toString().split('');
- for (var i = 0; i < temp.length; i++) {
- if (arrAns.indexOf(temp[i]) == -1) {
- arrAns.push(temp[i]);
- }
- nums = nums.replace(temp[i], '');
- }
- arrAns = getRandomArrayElements(arrAns.concat(getRandomArrayElements(nums.split(''), 4 - arrAns.length)), 4);
- this.setData({ btn1: arrAns[0] });
- this.setData({ btn2: arrAns[1] });
- this.setData({ btn3: arrAns[2] });
- this.setData({ btn4: arrAns[3] });
- },
對(duì)于英文鍵盤跟上邊差不多，在“單詞拼寫”小程序中，沿用上述解決方法，只不過把0-9數(shù)字換成了a-zA-Z加上英文“'”和"-"，由于英文單詞長(zhǎng)度都比較長(zhǎng)，無法一次全部輸入，采用的是變通的方法，每次鍵盤顯示需要當(dāng)前輸入的字母，輸入后顯示下個(gè)字母的鍵盤。具體界面如下圖：
主要代碼如下：
- MakeInputBtn: function () {
- if (this.data.mEnglish.length == this.data.inputValue.length) {
- return;
- }
- function getRandomArrayElements(arr, count) {
- var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
- while (i-- > min) {
- index = Math.floor((i + 1) * Math.random());
- temp = shuffled[index];
- shuffled[index] = shuffled[i];
- shuffled[i] = temp;
- }
- return shuffled.slice(min);
- }
- var letters = "abcdefghijklmnopqrstuvwxyz'- ABCDEFGHIJKLMNOPQRSTUVWXYZ"
- var arrAns = [];
- var currentLetter = this.data.mEnglish[this.data.inputValue.length];
- //console.log(currentLetter);
- if (currentLetter) {
- var temp = currentLetter.toString().split('');
- for (var i = 0; i < temp.length; i++) {
- if (arrAns.indexOf(temp[i]) == -1) {
- arrAns.push(temp[i]);
- }
- letters = letters.replace(temp[i], '');
- }
- arrAns = getRandomArrayElements(arrAns.concat(getRandomArrayElements(letters.split(''), 4 - arrAns.length)), 4);
- this.setData({ btn1: arrAns[0] });
- this.setData({ btn2: arrAns[1] });
- this.setData({ btn3: arrAns[2] });
- this.setData({ btn4: arrAns[3] });
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/24310.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
