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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
vue2.0 keep-alive最佳实践
Jul 06 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
简单的Python人脸识别系统
2020/07/14 Python
Python 读取位于包中的数据文件
2020/08/07 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
怎样声明子类
2013/07/02 面试题
学生请假条
2014/04/11 职场文书
1000字打架检讨书
2014/11/03 职场文书
开国大典观后感
2015/06/04 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers