单词默写

    <table border="0" align="center"   cellspacing="0" cellpadding="0" >
        <tr >
            <td colspan="2"  style="text-align: center ;background-color: blue">提交</td>
            <td colspan="1" >最近</td>
            <td colspan="3" style="text-align: left"   id="lately"></td>
            <td colspan="1">模式</td>
            <td colspan="1" style="margin: 0" >
                <select>
                    <option style="padding: 0;height: 30px" id="all">全部</option>
                    <option style="background-color: limegreen" id="already" onclick="arr_1()">已掌握</option>
                    <option style="background-color: yellow" id="bsx" onclick="arr_2()">不熟悉</option>
                    <option style="background-color: red" id="unAlready" onclick="arr_3()">未掌握</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="1">总计</td>
            <td colspan="1" id="total"></td>
            <td colspan="1">正确</td>
            <td colspan="1" id="right"></td>
            <td colspan="1" >错误</td>
            <td colspan="1" id="error"></td>
            <td colspan="1" >模糊</td>
            <td colspan="1" id="vague"></td>
        </tr>
        <tr>
            <td colspan="1">提示</td>
            <td colspan="7" id="tiShi" style="text-align: left"></td>
        </tr>
        <tr>
            <td colspan="1">单词</td>
            <td colspan="3" id="words"></td>

            <td colspan="1">音标</td>
            <td colspan="3" id="voice"></td>
        </tr>


        <tr style="height: 40px">
            <td colspan="1" >含义</td>
            <td colspan="7" id="mean"></td>
        </tr>


        <tr style="height: 120px">
            <td   colspan="1" >例句</td>
            <td  colspan="7"  id="example"></td>
        </tr>

        <tr>
            <td  colspan="2"><input type="button" onclick="front()" value="上一个" style="width: 100%"/></td>
            <td></td>
            <td  colspan="2"><input type="button"  id="status" onclick="start()" style="width: 100%;" value="开始" /></td>
            <td></td>
            <td  colspan="2"><input type="button" value="下一个" onclick="next()" style="width: 100%"/></td>
            <td></td>

        </tr>
        <tr>
            <td colspan="8">
                <span>单词：</span>
                <input id="inputWords"  type="text" value="" onchange="changeStatus(this.value)"  placeholder="请输入单词。。。"/></td>
        </tr>
        <tr>
            <td  colspan="2"><input id="know" type="button" onclick="know()" value="已掌握" style="width: 100%;background-color: limegreen"/></td>
            <td></td>
            <td  colspan="2"><input id="unfamiliar" type="button" onclick="unfamiliar()" value="不熟悉" style="width: 100%;background-color: yellow"/></td>
            <td></td>
            <td  colspan="2"><input id="unKnow" type="button" value="未掌握" onclick="unKnow()" style="width: 100%;background-color: red"/></td>
            <td></td>
        </tr>
        </table>

var list = [{'w': "wonderful", 'p': '发音', 'c': '极好的', 's': 'o', 'm': '1', 'r': ''},
    {'w': "banana", 'p': '发音', 'c': '香蕉', 's': 'a', 'm': '0', 'r': ''},
    {'w': "greater", 'p': '发音', 'c': '真棒', 's': 'i', 'm': '1', 'r': ''},
    {'w': "Unbelievable", 'p': '发音', 'c': '不可置信的', 's': 'i', 'm': '0', 'r': ''}];

// //定义三个数组，分别存放已掌握，不熟悉，未掌握的单词信息
var arr1 = [];
var arr2 = [];
var arr3 = [];

function arr_1(){
    for (var i = 0; i < list.length; i++) {
        if(list[i].r == 'S'){
            arr1.push(list[i]);
        }
    }
    list = arr1;
    index = 0;
}function arr_2(){
    for (var i = 0; i < list.length; i++) {
        if(list[i].r == 'U'){
            arr1.push(list[i]);
        }
    }
    list = arr2;
    index = 0;
}function arr_3(){
    for (var i = 0; i < list.length; i++) {
        if(list[i].r == 'E'){
            arr1.push(list[i]);
        }
    }
    list = arr3;
    index = 0;
}
//定义数组下标
var index = 0;

//输入框onchange的方法
var right = 0, error = 0, familiar = 0;
var total ;
//定义数组存放已经掌握的单词，为了再次点击正确数量不再加
var arrRight = [];
//点击状态等
function start() {
    document.getElementById("status").setAttribute('disabled',"true");
    total = list.length;
    index = 0;
    document.getElementById("total").innerHTML=total;
    document.getElementById("right").innerHTML=right;
    document.getElementById("error").innerHTML=error;
    document.getElementById("vague").innerHTML=familiar;
    //设置最近的为空
    document.getElementById("lately").innerHTML='未考试！';

    comment();

}
//单词提示的类型
function comment(){

    if(list[index].m == '0'){
        //选择第一个数据提示
        document.getElementById('tiShi').innerHTML=list[index].w;
        document.getElementById('mean').innerHTML='';
        document.getElementById('words').innerHTML='';
        document.getElementById('voice').innerHTML='' ;
        document.getElementById('example').innerHTML='';
    }else {
        //选择第一个数据提示
        document.getElementById('tiShi').innerHTML=list[index].w.charAt(0) + list[index].c;
        document.getElementById('mean').innerHTML='';
        document.getElementById('words').innerHTML='';
        document.getElementById('voice').innerHTML='';
        document.getElementById('example').innerHTML='';
    }



}
//下一个单词
function next(){
    index += 1;
    document.getElementById('words').innerHTML=list[index].w;
    document.getElementById('lately').innerHTML=list[index-1].w;
    if(index == list.length){
        index = 0;
    }
    comment();
}
//上一个单词
function front(){
    index -= 1;
    document.getElementById('words').innerHTML=list[index].w;
    //设置最近的考试单词
    document.getElementById('lately').innerHTML=list[index-1].w;
    if(index < 0){
        index = list.length-1;
    }
    comment();
}

//点击已掌握按钮
function know() {
    var text = document.getElementById("words").innerHTML;
    if (text) {
        for (var i = 0; i < list.length; i++) {
            if (list[i].w == text) {
                list[i].r = 'S';
            }
        }
    }
}

//设置不熟悉的单词
function unfamiliar() {
    var text = document.getElementById("words").innerHTML;
    if (text) {
        for (var i = 0; i < list.length; i++) {
            if (list[i].w == text) {
                list[i].r = 'U';
            }
        }
    }
}

//设置未掌握的单词
function unKnow() {
    var text = document.getElementById("words").innerHTML;
    if (text) {
        for (var i = 0; i < list.length; i++) {
            if (list[i].w == text) {
                list[i].r = 'E';
            }
        }
    }
}

// //输入框onchange的方法
// var right = 0, error = 0;
// //定义数组存放已经掌握的单词，为了再次点击正确数量不再加
// var arrRight = [];
//输入框状态改变
function changeStatus(words) {

    alert(list[index].w);
    //判断输入单词是否正确
    if (words == list[index].w) {
        document.getElementById('mean').innerHTML=list[index].c;
        document.getElementById('words').innerHTML=list[index].w;
        document.getElementById('voice').innerHTML=list[index].p;
        document.getElementById('example').innerHTML=list[index].s;
        if (!arrRight.includes(words)) {
            arrRight.push(words);
            right += 1;
        }
        //正确加1
        document.getElementById('right').innerHTML=right;
        //状态灯绿色
        document.getElementById('status').style.backgroundColor = 'green';
    }else{
        //设置Button为红色
        document.getElementById('status').style.backgroundColor = 'red';
        error += 1;
        //没有匹配到表示输入错误
        document.getElementById('error').innerHTML=error;
    }

}

// function myFunction(nextIndex) {
//     //选择未判断的数据的第一条
//     for (; nextIndex < list.length; nextIndex++) {
//         if (list[i].r == '') {
//             document.getElementById('#tiShi').text(list[flag].w.charAt(nextIndex) + list[flag].c);
//             // document.getElementById('#tiShi').text('求你了，背下单词');
//             document.getElementById('#mean').text('');
//             document.getElementById('#words').text('');
//             document.getElementById('#voice').text('');
//             document.getElementById('#example').text('');
//         }
//     }
// }