各位朋友！今天我们就来谈谈如何用JavaScript编一个简简单单的单词测试题库！知道怎么搞？接着往下看！

首先，咱们得明白题库究竟是咋回事？其实，它是运用了sessionStorage和localStorage两个小工具实现的。那这俩东东到底有啥用？说得直白点儿，它们主要功能就是在上网页时帮你保存数据！就好比一个很大很大的仓库，啥都能装进去。

 
单词录入
 


 English:

 中文:

 保存


 



 开始测试
 你已经录入0组词汇
 

好，接下来咱们来看看这些代码到底怎么回事。首先，就是页面1的JS代码，然后再讲讲页面2和页面3的。不过我得告诉你文章有点长，我就只把一部分写出来给你们看看。

咱们来聊聊Web storage图！你知道为啥要聊这张图吗？那是因为这里面藏着个特别有用的工具 – localStorage。简单说，这个tool就像个大口袋，可以帮我们轻松存取数据！

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 的数据长度
  for(var i = 0 ; i<=localStorage.length;i++){
  num.innerHTML = `你已经录入${i}组词汇`
  }
 }
 start.onclick = function(){
  confirm('确定现在开始测验？');
  location.href = 'test.html';
 }

好，咱们接下来聊聊第二页的事儿。这一页就是玩儿个把数组里的东西乱序摆出来就行了，和我们小时候玩儿投骰子差不多然后，当你点击输入框后，得看看你输的答案对不对，还得记录下你猜对了还是错了。这可是关键步骤！因为要算总成绩滴！

记住，别以为在“下一步”按钮被按下时就能立刻判断，这时候输入框里的数据可能都变了。所以，咱得等把焦点转移开之后再做判断

 var test = document.getElementById("test");
 var arr = new Array();
 var start = document.getElementsByClassName("start")[0];
 //遍历localStorage对象 将key和value取出来存放到新的arr数组
 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];
   //初始化总题数，正确数量，错误数量
   var all = arr.length;
   var right = 0;
   var wrong = 0;
   sessionStorage.setItem('题库',all);
   btn.onclick = function(){
   //判断数组中存在数据
   if (arr.length) {
    //在数组中随机取一道题显示在页面上
    let index = Math.floor(Math.random()*arr.length);
    test.innerHTML=`${arr[index].key}:
`;
    var cn = document.getElementsByName("cn")[0];
    //input失焦后对value值和存好的数据进行比对
    cn.onblur = function(){
    if (cn.value == arr[index].val) {
     right++;
    }else{
     wrong++;
    }
    //储存正确和错误数量
    sessionStorage.setItem('right',right);
    sessionStorage.setItem('wrong',wrong);
    //防止后续出现这个题在数组中删除它
    arr.splice(index,1);
    }  
   }else{
    test.innerHTML = `这已经是最后一题了`
   }  
   }
   start.onclick = function(){
   confirm('确定提交答案？');
   location.href = 'result.html'
   }

除了我刚才讲的那些，还有些小提示也贴在了代码里。如果你愿意花点时间细看一眼，可能会更容易理解。

好，下面咱们就公布答案！希望大家都能学到新技能，同时也多多支持我们要是有啥疑问或想法的话，就给我们留言今天我给大伙儿介绍了如何用JavaScript做个简单又炫酷的单词测试题库教程。只要用上sessionStorage和localStorage储存数据，就能轻而易举搞定这个功能。希望这篇文章能帮到各位小伙伴们的学习，也要继续支持我们！别忘了留下评论、点赞、分享

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