用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 实战教程 查看内容

在微信小程序中使用“随机键盘”

纸飞机 2018-3-30 11:41

最近研究微信小程序,发现在手机上使用系统键盘非常不方便,一是按键太小,对于小学生来说,操作非常不方便;二是系统键盘反复切换影响界面布局。于是自己决定自己写一个随机的小键盘。原理非常简单:拿“口算练习” ...

最近研究微信

小程序

,发现在手机上使用系统键盘非常不方便,一是按键太小,对于小学生来说,操作非常不方便;二是系统键盘反复切换影响界面布局。于是自己决定自己写一个随机的小键盘。

原理非常简单:拿“口算练习”来说,总共只设置四个数字输入键和一个“Del”键,随机从0-9这10个数字随机显示四个数字就足够了,当然这四个数字必须包含答案所含的数字。

如下图中界面所示:习题为“9+77=?”,答案为86,先提出8和6,再从剩下的01234579八个数字中随机取两个数字,之后和8、6总共四个数字再进行随机排序,最后分别显示在四个数字键上,OK!

生成“随机键盘”的代码如下:

  1. MakeNumBtn: function () {
  2. function getRandomArrayElements(arr, count) {
  3. var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
  4. while (i-- > min) {
  5. index = Math.floor((i + 1) * Math.random());
  6. temp = shuffled[index];
  7. shuffled[index] = shuffled[i];
  8. shuffled[i] = temp;
  9. }
  10. return shuffled.slice(min);
  11. }
  12. if (op === "+") {
  13. ans = A + B;
  14. } else if (op === "-") {
  15. ans = A - B;
  16. } else if (op === "×") {
  17. ans = A * B;
  18. } else if (op === "÷") {
  19. ans = A / B;
  20. }
  21. var nums = '0123456789'
  22. var arrAns = [];
  23. var temp = ans.toString().split('');
  24. for (var i = 0; i < temp.length; i++) {
  25. if (arrAns.indexOf(temp[i]) == -1) {
  26. arrAns.push(temp[i]);
  27. }
  28. nums = nums.replace(temp[i], '');
  29. }
  30. arrAns = getRandomArrayElements(arrAns.concat(getRandomArrayElements(nums.split(''), 4 - arrAns.length)), 4);
  31. this.setData({ btn1: arrAns[0] });
  32. this.setData({ btn2: arrAns[1] });
  33. this.setData({ btn3: arrAns[2] });
  34. this.setData({ btn4: arrAns[3] });
  35. },

对于英文键盘跟上边差不多,在“单词拼写”小程序中,沿用上述解决方法,只不过把0-9数字换成了a-zA-Z加上英文“'”和"-",由于英文单词长度都比较长,无法一次全部输入,采用的是变通的方法,每次键盘显示需要当前输入的字母,输入后显示下个字母的键盘。具体界面如下图:

 

主要代码如下:

  1. MakeInputBtn: function () {
  2. if (this.data.mEnglish.length == this.data.inputValue.length) {
  3. return;
  4. }
  5. function getRandomArrayElements(arr, count) {
  6. var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
  7. while (i-- > min) {
  8. index = Math.floor((i + 1) * Math.random());
  9. temp = shuffled[index];
  10. shuffled[index] = shuffled[i];
  11. shuffled[i] = temp;
  12. }
  13. return shuffled.slice(min);
  14. }
  15. var letters = "abcdefghijklmnopqrstuvwxyz'- ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  16. var arrAns = [];
  17. var currentLetter = this.data.mEnglish[this.data.inputValue.length];
  18. //console.log(currentLetter);
  19. if (currentLetter) {
  20. var temp = currentLetter.toString().split('');
  21. for (var i = 0; i < temp.length; i++) {
  22. if (arrAns.indexOf(temp[i]) == -1) {
  23. arrAns.push(temp[i]);
  24. }
  25. letters = letters.replace(temp[i], '');
  26. }
  27. arrAns = getRandomArrayElements(arrAns.concat(getRandomArrayElements(letters.split(''), 4 - arrAns.length)), 4);
  28. this.setData({ btn1: arrAns[0] });
  29. this.setData({ btn2: arrAns[1] });
  30. this.setData({ btn3: arrAns[2] });
  31. 邀请
    鲜花
    鲜花
    握手
    握手
    雷人
    雷人
    路过
    路过
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏