快捷導航

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

更新時間：2019年12月24日 11:33:53 作者：.olofmeister

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)英語單詞題庫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript制作簡易單詞測試題庫的具體代碼，供大家參考，具體內(nèi)容如下

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

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

<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">開始測試</button>
 <span class="num">你已經(jīng)錄入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 = `你已經(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ù)長度
  for(var i = 0 ; i<=localStorage.length;i++){
  num.innerHTML = `你已經(jīng)錄入${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>這已經(jīng)是最后一題了</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的內(nèi)容是將數(shù)組的內(nèi)容按照隨機順序擺放到頁面中在input框失去焦點后進行判斷對正確答案和錯誤答案進行保存（注意一定不能再點擊下一個的時候進行判斷因為此時的input框?qū)?yīng)的數(shù)據(jù)內(nèi)容以及改變）以便輸出最后的數(shù)量其他一些注釋已經(jīng)寫在代碼中了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: