JavaScript實現(xiàn)英語單詞題庫的方法

這篇文章給大家分享的是有關JavaScript實現(xiàn)英語單詞題庫的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內容如下

使用sessionStorage和localStorage制作一個英語單詞題庫

由于一共有三個頁面 所以html代碼和css代碼只展示部分作參考

<div class="main">
 <h2>單詞錄入</h3>
 <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  /><br><br>
 <button class="start">開始測試</button>
 <span class="num">你已經錄入0組詞匯</span>
 </div>

頁面1JS

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

頁面2JS

 var test = document.getElementById("test");
 var arr = new Array();
 var start = document.getElementsByClassName("start")[0];
 //遍歷localStorage對象 將key和value取出來存放到新的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ù)量，錯誤數(shù)量
   var all = arr.length;
   var right = 0;
   var wrong = 0;
   sessionStorage.setItem('題庫',all);
   btn.onclick = function(){
   //判斷數(shù)組中存在數(shù)據(jù)
   if (arr.length) {
    //在數(shù)組中隨機取一道題顯示在頁面上
    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失焦后對value值和存好的數(shù)據(jù)進行比對
    cn.onblur = function(){
    if (cn.value == arr[index].val) {
     right++;
    }else{
     wrong++;
    }
    //儲存正確和錯誤數(shù)量
    sessionStorage.setItem('right',right);
    sessionStorage.setItem('wrong',wrong);
    //防止后續(xù)出現(xiàn)這個題在數(shù)組中刪除它
    arr.splice(index,1);
    }  
   }else{
    test.innerHTML = `<span>這已經是最后一題了</span>`
   }  
   }
   start.onclick = function(){
   confirm('確定提交答案？');
   location.href = 'result.html'
   }

頁面3JS

var all = document.getElementById("all");
var right = document.getElementById("right");
 var wrong = document.getElementById("wrong");
 all.innerHTML = sessionStorage.題庫;
 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"
 }

下面是兩個web儲存的圖作為重點

重點是將數(shù)據(jù)存儲到 localStorage 中 再便利這個對象將鍵值對存儲到數(shù)組中以便我們后續(xù)使用，界面2的內容是將數(shù)組的內容按照隨機順序擺放到頁面中 在input框失去焦點后進行判斷對正確答案和錯誤答案進行保存 （注意一定不能再點擊下一個的時候進行判斷因為此時的input框對應的數(shù)據(jù)內容以及改變） 以便輸出最后的數(shù)量 其他一些注釋已經寫在代碼中了。

感謝各位的閱讀！關于“JavaScript實現(xiàn)英語單詞題庫的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！