<div class="main">
 <h1>單詞錄入</h2>
 <hr><br>
 <span>English:</span><input type="text" name="en"><br>
 <span>中文:</span><input type="text" name="cn"><br>
 <button class="btn" value="">保存</button><br><br>
 <hr style=" border-top:10px dotted #4285f4;" /><br><br>
 <button class="start">開(kāi)始測(cè)試</button>
 <span class="num">你已經(jīng)錄入0組詞匯</span>
 </div>

var en = document.getElementsByName("en")[0];
var cn = document.getElementsByName("cn")[0];
var btn = document.getElementsByClassName("btn")[0];
var start = document.getElementsByClassName("start")[0];
var num = document.getElementsByClassName("num")[0];
num.innerHTML = `你已經(jīng)錄入${localStorage.length}組詞匯`
btn.onclick = function(){
  localStorage.setItem(cn.value,en.value);
  document.getElementsByName("en")[0].value = '';
  document.getElementsByName("cn")[0].value = '';
  //num為已經(jīng)存入localStorage 的數(shù)據(jù)長(zhǎng)度
  for(var i = 0 ; i<=localStorage.length;i++){
  num.innerHTML = `你已經(jīng)錄入${i}組詞匯`
  }
 }
 start.onclick = function(){
  confirm('確定現(xiàn)在開(kāi)始測(cè)驗(yàn)？');
  location.href = 'test.html';
 }

 var test = document.getElementById("test");
 var arr = new Array();
 var start = document.getElementsByClassName("start")[0];
 //遍歷localStorage對(duì)象 將key和value取出來(lái)存放到新的arr數(shù)組
 for(var i = 0; i < localStorage.length; i++) {
     var getKey = localStorage.key(i);
     var getVal = localStorage.getItem(getKey);
     arr[i] = {
       'key': getKey,
       'val': getVal,
     }
   }
   var btn = document.getElementsByClassName("btn")[0];
   //初始化總題數(shù)，正確數(shù)量，錯(cuò)誤數(shù)量
   var all = arr.length;
   var right = 0;
   var wrong = 0;
   sessionStorage.setItem('題庫(kù)',all);
   btn.onclick = function(){
   //判斷數(shù)組中存在數(shù)據(jù)
   if (arr.length) {
    //在數(shù)組中隨機(jī)取一道題顯示在頁(yè)面上
    let index = Math.floor(Math.random()*arr.length);
    test.innerHTML=`<span>${arr[index].key}:</span><input type="text" name="cn" autocomplete="off"><br>`;
    var cn = document.getElementsByName("cn")[0];
    //input失焦后對(duì)value值和存好的數(shù)據(jù)進(jìn)行比對(duì)
    cn.onblur = function(){
    if (cn.value == arr[index].val) {
     right++;
    }else{
     wrong++;
    }
    //儲(chǔ)存正確和錯(cuò)誤數(shù)量
    sessionStorage.setItem('right',right);
    sessionStorage.setItem('wrong',wrong);
    //防止后續(xù)出現(xiàn)這個(gè)題在數(shù)組中刪除它
    arr.splice(index,1);
    }  
   }else{
    test.innerHTML = `<span>這已經(jīng)是最后一題了</span>`
   }  
   }
   start.onclick = function(){
   confirm('確定提交答案？');
   location.href = 'result.html'
   }

var all = document.getElementById("all");
var right = document.getElementById("right");
 var wrong = document.getElementById("wrong");
 all.innerHTML = sessionStorage.題庫(kù);
 right.innerHTML = sessionStorage.right;
 wrong.innerHTML = sessionStorage.wrong;
 var start = document.getElementsByClassName("start")[0];
 var again = document.getElementsByClassName("again")[0];
 start.onclick = function(){
  location.href = "save.html";
 }
 again.onclick = function(){
  location.href = "test.html"
 }