快捷導(dǎo)航

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

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

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

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

使用sessionStorage和localStorage制作一個(gè)英語單詞題庫

由于一共有三個(gè)頁面所以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)在開始測驗(yà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ù)量，錯(cuò)誤數(shù)量
   var all = arr.length;
   var right = 0;
   var wrong = 0;
   sessionStorage.setItem('題庫',all);
   btn.onclick = function(){
   //判斷數(shù)組中存在數(shù)據(jù)
   if (arr.length) {
    //在數(shù)組中隨機(jī)取一道題顯示在頁面上
    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ù)進(jìn)行比對
    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'
   }

頁面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"
 }

下面是兩個(gè)web儲(chǔ)存的圖作為重點(diǎn)

重點(diǎn)是將數(shù)據(jù)存儲(chǔ)到 localStorage 中再便利這個(gè)對象將鍵值對存儲(chǔ)到數(shù)組中以便我們后續(xù)使用，界面2的內(nèi)容是將數(shù)組的內(nèi)容按照隨機(jī)順序擺放到頁面中在input框失去焦點(diǎn)后進(jìn)行判斷對正確答案和錯(cuò)誤答案進(jìn)行保存（注意一定不能再點(diǎn)擊下一個(gè)的時(shí)候進(jìn)行判斷因?yàn)榇藭r(shí)的input框?qū)?yīng)的數(shù)據(jù)內(nèi)容以及改變）以便輸出最后的數(shù)量其他一些注釋已經(jīng)寫在代碼中了。

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

您可能感興趣的文章: