仿金山打字键盘练习（原创）

 查看演示  website  立即下载

发布时间：2019-2-27 9:53

运用了sass和jquery。

sass部分

$bgColor:#fff;//键盘默认背景色
$color:#000;//键盘默认字体颜色
$ativeColor:#00ff21;//键盘选中背景色
$errorColor:#ff0021;//键盘匹配错误的背景色
$bgShadow:#888;//键盘默认阴影颜色
$waitPractice:#00c2ff;//提示区待输入键盘背景色
$lineHeight:#fff;  //特效高光的颜色
$lineHeightShadow:#d0d0d0;
$bgColor2:#000;
$bgShadow2:#a0913d;
$color2:#a0913d;
$lineHeight2:#484848;
$lineHeightShadow2:#ebe7d5;
$ativeColor2:#00ff21;
$width:50px;
$height:50px;
//此处用了两种的颜色模板，如果想恢复默认，可以把下面这段代码注释，就可以看到默认的效果了
$bgColor:$bgColor2;
$color:$color2;
$ativeColor:$ativeColor2;
$bgShadow:$bgShadow2;
$lineHeight:$lineHeight2;
$lineHeightShadow:$lineHeightShadow2;

jquery部分

初始化参数

var keyJson = "", //一次性获取所有的数据，免得重复请求
    ready = 0, //初始化起始组
    keyArrayNum = 0, //获取总分组数
    isComplete = false, //判断是否已经完成练习
    keyArray = []; //每一组的数组
var accuracy = 0, //正确率
    clickKeyNum = 0, //点击键盘次数，用于计算正确率
    percentageComplete = 0, //完成率
    totalNums = 0, //所有数据的条数，用于计算完成率
    correctkeynNum = 0, //正确点击键盘次数，用于计算正确率，和完成率
    isSound = true, //音效开关
    time = "", //计算时间
    timeStart = 0; //初始化时间为0
/*练习模式的改变改变数据*/
$(".schemaChanges").change(function() {
    keychange = $(this).val();
    schemaChanges(keychange);
})

PREVIOUS:
NEXT:
带排序功能的瀑布流插件stable.js
基于Web的JavaScript电子表格插件