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

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

原理非常简单:拿“口算练习”来说,总共只设置四个数字输入键和一个“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

上述两个小程序已经发布上线,有兴趣可以到我的微信公众号查看,有问题可以在公众号留言,有写的不好的地方,欢迎指正。



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286588.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之提示订阅配置订阅需要传新的包 添加结算权限。

1 问题 apk上google应用市场&#xff0c;然后开通支付商品&#xff0c;错误提示如下 2 解决办法 AndroidManifest.xml里面添加谷歌支付权限 <!-- google pay --><uses-permission android:name"com.android.vending.BILLING" />

【前端就业课 第一阶段】HTML5 零基础到实战(三)一篇文CSS基础入门

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

C#如何获取实体类属性名和值?

数据模型定义public class User{public User(){student new student();}public string name { get; set; }public string gender { get; set; }public int age { get; set; }public student student { get; set; }}public class student{public int ID { get; set; }public st…

将VNC 安装在Centos 7步骤

&#xff08; Virtual Network Computing&#xff09;VNC允许Linux系统可以类似实现像Windows中的远程桌面访问那样访问Linux桌面。本文配置机器是兴宁市网络信息中心的一台Centos 7 HP服务器环境下运行。 首先试试服务器装了VNC没 [rootwic ~]# rpm -q tigervnc tigervnc-serv…

利用MRT进行Modis NDVI数据(MOD13Q1)投影变换格式转换操作图文教程

本实例以Modis NDVI(MOD13Q1,空间分辨率为250m)一景影像数据为例,演示利用MRT进行Modis NDVI影像变换,主要内容包括:将.hdf格式转为.tif格式,将坐标系转为Albers等积投影。 ArcGIS完美转换方法: 《ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换》 《重磅!ArcGI…

ActiveMQ无法启动

解决办法&#xff1a;activemq无法启动&#xff0c;端口被占用 用netstat -an无法查出61616被哪个进程占用&#xff08;实践证明&#xff0c;netstat -ano|findstr 61616什么也没有找到&#xff09; 经过排查和网上资料参考&#xff0c;被windows的Internet connection share(I…

Android之升级OkHttp编译提示错误如下Using ‘body(): ResponseBody?’ is an error. moved to val

1 问题 升级okHttp库&#xff0c;编译项目错误如下 Using ‘body(): ResponseBody?’ is an error. moved to val 2 解决办法 原来的代码 val list response.body().string() 去掉&#xff08;&#xff09;就可以了 val list response.body.string()

单例

当实际上Singleton是一个对象&#xff0c;我们不能保证使用者不会使用其他的方法去创建&#xff08;比如alloc&#xff09;,这个时候他就会创建多个实例&#xff0c;这样就会出现这些无法感知的bug&#xff09; implementation Singleton static Singleton * sharedSingleton …

Google 开源的 Android 排版库:FlexboxLayout

最近Google开源了一个项目叫「FlexboxLayout」。1.什么是 Flexbox简单来说 Flexbox 是属于web前端领域CSS的一种布局方案&#xff0c;是2009年W3C提出了一种新的布局方案&#xff0c;可以简便、完整、响应式地实现各种页面布局&#xff0c;并且 React Native 也是使用的 Flex 布…

Docker Network 配置,自定义bridge网络

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182Docker Network 配置&#xff0c;自定义bridge网络 1.停止服务 service docker stop 2.关掉docker0 ifconfi…

再见 KataCoda——O'Reilly 宣布其将在六月份关闭

近日听闻 OReilly 将永久关闭在线学习网站 KataCoda&#xff0c;对于广大程序员和学习者来说&#xff0c;这无疑是一件痛心疾首的事情&#xff0c;以后我们再也看不到那只会变成的功夫猫了。KataCoda 简介KataCoda 成立于 2016 年&#xff0c;它是一个在线学习平台&#xff0c;…

中国区域Modis行列号(附Shapefile文件下载)

重磅&#xff1a;Landsat中国西北地区行列号Shapefile图层对照&#xff08;附行列号Shapefile下载&#xff09; 全球&#xff1a; 中国&#xff1a;

Android之解决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签)

1 问题 决webview加载第三方网页点击弹不出下拉框&#xff08;html页面里面的select标签&#xff09;&#xff0c;我们访问youtube.com官网&#xff0c;点击网站的视频&#xff0c;点击视频右上角三个点设置&#xff0c;然后点击 播放设置 然后点击画质 弹不出选项框&#xf…

【前端就业课 第一阶段】HTML5 零基础到实战(四)伪类与伪元素

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

编写第一个响应式页面

2019独角兽企业重金招聘Python工程师标准>>> 本文为大家讲解如何使用一种科学的方法实现网页设计&#xff0c;从原理上搞清楚什么是响应式设计&#xff0c;并实现一个简易的响应式设计框架&#xff0c;以此为基础&#xff0c;编写出第一个响应式页面。 不知道现在大…

container 的背后

如果要看laravel的单个功能的源代码&#xff0c;首先去找对应得ServiceProvider,例如加密功能hash,则按一下步骤查看源代码&#xff1a; HashServiceProvider.php(主要是看register方法) singleton()方法就是将BcryptHasher这个类实例化一次&#xff0c;然后在哪里都可以用&…

android中像素单位dp、px、pt、sp的比较

dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关&#xff0c;一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个&#xff0c;不依赖像素。px: pixels(像素). 不同设备显示效果相同&#xff0c;一般我们HVGA代表320x480像素&…

ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换

大家都熟知,MODIS NDVI数据的处理一般是在MRT中进行的,但熟不知ArcGIS中也可以实现投影变换个数据格式的转换,本文就以MOD13Q1.A2020001.h26v05.006.2020018002618.hdf这一景影像为例,实现将正弦曲线投影转换为Albers等积投影,将hdf格式转为tif。 ArcGIS python批处理代码…

开源项目千千万,如何发现好项目

视频来自 OSSInsight 推特。不知道大家听说没有 PingCAP 推出的一个 OSSInsight.io 网站&#xff0c;可以根据 GitHub 上的事件&#xff0c;提供开源软件洞察&#xff0c;这个项目也开源在 GitHub[1] 上。它可以提供以下方面的洞察能力&#xff0c;有点类似于 Google Analytics…

Git之回退已经提交到远程仓库的代码(已经push的代码)

1 问题 git 把当前的修改已经push到远程仓库&#xff0c;现在需要回退这个远程提交 2 解决办法 1&#xff09;、我们用git log命令找到commit Id d6434e39e842a40b79119b2b88e76dd1498f8654是我最后一次提交&#xff0c; 然后我们现在需要回退到145c4fc7f237176acba1bca515e9…