nwjs(nodejs)写桌面应用(少儿英语学习项目经验总结)

LinuxGeek
• 阅读 3837

项目背景

最近上三年级儿子的英语老是记不住单词,而他们又在上科学课,老师让练打字。打字和英语学习都没太适合小家伙的实际情况,因此就花了一个周末写下了这个项目。

实现功能

  • 两种模式:随机模式,从词库里随机抽取题目,会重复,一直运行;顺序模式,将词库打乱后成一个队列,依次出题,不会重复,一遍完成,给出统计结果。

  • 两种输入判断方式:单词或短语方式,回车提交;打字模式,单字母输入时,如果和结果相符,自动提交。

  • 题库为json文件,存在指定目录中。

暂时实现了上面这些功能,至于题库单词配音、选择装载、错题存储、单词权重等想到的功能,先列在此,要是小家伙能用起来再说吧。

开发中遇到的问题

  • radio单选框在动态设置时,使用attr就第一次能生效,应该用prop方法。

  • 读目录下所有文件,要排除系统生成的隐藏文件,如苹果下的.DS_Store。

  • 打字时,要判断完马上清除input框的文字,应该用onkeyup事件,不能用onkeydown。

  • keyCode取得的字母ASIIC码是大写字母的。

关键源码说明

题库的读入与题目队列的初始化

题库为指定目录下所有json文件,使用lodash辅助处理(开始用的underscore);题目队列生成时就随机打乱,为简化后面的操作。

var files = fs.readdirSync('./json');
    for(var k = 0; k < files.length; k++){
        if(__.endsWith(files[k],".json"))
            __.extend(lib, JSON.parse(fs.readFileSync("./json/" + files[k])));
    }
    //console.dir(lib);
    var keys = Object.keys(lib);
    for( var i = 0; i < keys.length; i++){
        if(problems.indexOf(lib[keys[i]]) < 0){
            problems.splice(__.random(problems.length-1),0,lib[keys[i]]);
        }
    }
    //console.dir(problems);

keyUp事件处理

打字练习库是a-z的一个键与值同等的对象,输入一个字母时,若与题目相等,则响应,开始我用的onkeydown,此时从界面取值是取不到的,所以写成了下面这个模式,想来改用onkeyup后是不是不用这样麻烦了,有空再测试一下。

function keyUp(e) {
    var ev= window.event||e;
    if (ev.keyCode == 13 && $("#inputInfo").val().trim().length > 0) {
        answerCommit();
    }else if(ev.keyCode == $("#problem").val().toUpperCase().charCodeAt()){
        answerCommit(ev.keyCode);
    }
}

答案提交处理

模拟了函数重载,根据有无参数,分别对打字练习和单词两种方式进行数据预处理。

function answerCommit(){
    var answer,problem;
    if(arguments.length == 0){
        answer = lib[$("#inputInfo").val().trim()];
        problem = $("#problem").val();
    }
    else if(arguments.length == 1){
        answer = arguments[0];
        problem = $("#problem").val().toUpperCase().charCodeAt();
    }
    if(answer==problem){

源代码

源码托管在开源中国,有兴趣的同学可以过去拍砖,呵呵。

https://git.oschina.net/zhoutk/ilearn.git

运行方法

全局安装nw.js

npm install nw -g

克隆源代码

git clone https://git.oschina.net/zhoutk/ilearn.git

安装依赖库

cd ilearn & npm install

运行项目

nw
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00_设计模式之语言选择
设计模式之语言选择设计模式简介背景设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。设计模式(Designpattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
LinuxGeek
LinuxGeek
Lv1
西北望乡何处是,东南见月几回圆。
文章
5
粉丝
0
获赞
0