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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 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 has encountered an Access Violation
2007/01/15 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python gevent协程切换实现详解
2020/09/14 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
年度献血先进个人事迹材料
2014/02/14 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
三万活动总结
2014/04/28 职场文书
政府采购方案
2014/06/12 职场文书
世界读书日的活动方案
2014/08/20 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书