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 相关文章推荐
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
js电话号码验证方法
Sep 28 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
3种vue组件的书写形式
Nov 29 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
Node.js Express安装与使用教程
May 11 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
php下使用SMTP发邮件的代码
2008/01/10 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
javascript如何创建对象
2016/08/29 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python 获取图片分辨率的方法
2019/01/08 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
党员群众路线承诺书
2014/05/20 职场文书
计划生育标语
2014/06/23 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫