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之一
Apr 27 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
JS实现提示框跟随鼠标移动
Aug 27 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
基于文本的搜索
2006/10/09 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详解vue axios中文文档
2017/09/12 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python 文件与目录操作
2008/12/24 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
NumPy中的维度Axis详解
2019/11/26 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python中os模块功能与用法详解
2020/02/26 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
在职人员函授期间自我评价分享
2013/11/08 职场文书
招商专员岗位职责
2014/02/08 职场文书
活动宣传稿范文
2015/07/23 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery