JavaScript实现英语单词题库


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了JavaScript制作简易单词测试题库的具体代码,供大家参考,具体内容如下

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

页面2JS

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=`<span>${arr[index].key}:</span><input type="text" name="cn" autocomplete="off"><br>`;
    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 = `<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储存的图作为重点

JavaScript实现英语单词题库

JavaScript实现英语单词题库

重点是将数据存储到 localStorage 中 再便利这个对象将键值对存储到数组中以便我们后续使用,界面2的内容是将数组的内容按照随机顺序摆放到页面中 在input框失去焦点后进行判断对正确答案和错误答案进行保存 (注意一定不能再点击下一个的时候进行判断因为此时的input框对应的数据内容以及改变) 以便输出最后的数量 其他一些注释已经写在代码中了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
JS原型链怎么理解
Jun 27 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 #Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 #Javascript
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
JS实现小星星特效
Dec 24 #Javascript
You might like
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue组件之间的数据传递方法详解
2019/04/19 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
python strip()函数 介绍
2013/05/24 Python
python append、extend与insert的区别
2016/10/13 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python支持多继承吗
2020/06/19 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
赤壁观后感(2)
2015/06/15 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python