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本身的局限性 别让javascript做太多事
Mar 23 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
纯js实现倒计时功能
Jan 06 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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递归使用示例(php递归函数)
2014/02/14 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python pillow模块使用方法详解
2019/08/30 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python加速程序运行的方法
2020/07/29 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
自我鉴定怎么写
2013/12/05 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
商业项目策划方案
2014/06/05 职场文书
岳庙导游词
2015/02/04 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
新闻稿怎么写
2015/07/18 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
python模板入门教程之flask Jinja
2022/04/11 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技