最近研究微信小程式,發現在手機上使用系統鍵盤非常不友善,一是按鍵太小,對于國小生來說,操作非常不友善;二是系統鍵盤反複切換影響界面布局。于是自己決定自己寫一個随機的小鍵盤。
原理非常簡單:拿“口算練習”來說,總共隻設定四個數字輸入鍵和一個“Del”鍵,随機從0-9這10個數字随機顯示四個數字就足夠了,當然這四個數字必須包含答案所含的數字。
如下圖中界面所示:習題為“9+77=?”,答案為86,先提出8和6,再從剩下的01234579八個數字中随機取兩個數字,之後和8、6總共四個數字再進行随機排序,最後分别顯示在四個數字鍵上,OK!
生成“随機鍵盤”的代碼如下:
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] });
},
對于英文鍵盤跟上邊差不多,在“單詞拼寫”小程式中,沿用上述解決方法,隻不過把0-9數字換成了a-zA-Z加上英文“'”和"-",由于英文單詞長度都比較長,無法一次全部輸入,采用的是變通的方法,每次鍵盤顯示需要目前輸入的字母,輸入後顯示下個字母的鍵盤。具體界面如下圖:
主要代碼如下:
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] });
}
}
“口算”小程式的完整代碼:https://github.com/JackieZheng/xxks.Jackie.wApp
上述兩個小程式已經釋出上線,有興趣可以到我的微信公衆号檢視,有問題可以在公衆号留言,有寫的不好的地方,歡迎指正。