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 16 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript动画浅析
2012/08/30 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
python中元类用法实例
2014/10/10 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python实现打砖块游戏
2020/02/25 Python
Python如何省略括号方法详解
2020/03/21 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
python批量生成条形码的示例
2020/10/10 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
煤矿安全生产责任书
2014/04/15 职场文书
预备党员转正考核材料
2014/06/03 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
优秀教师个人材料
2014/12/15 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python