微客导航 » 文章资讯 » JavaScript实现英语单词题库

JavaScript实现英语单词题库

2023-08-04 01:38:04 311

本文实例为大家分享了JavaScript制作简易单词测试题库的具体代码，供大家参考，具体内容如下

使用sessionStorage和localStorage制作一个英语单词题库

由于一共有三个页面所以html代码和css代码只展示部分作参考


单词录入


English:

中文:

保存





开始测试
你已经录入0组词汇

页面1JS

varen=document.getElementsByName("en")[0];
varcn=document.getElementsByName("cn")[0];
varbtn=document.getElementsByClassName("btn")[0];
varstart=document.getElementsByClassName("start")[0];
varnum=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(vari=0;i<=localStorage.length;i++){
num.innerHTML=`你已经录入${i}组词汇`
}
}
start.onclick=function(){
confirm('确定现在开始测验？');
location.href='test.html';
}

页面2JS

vartest=document.getElementById("test");
vararr=newArray();
varstart=document.getElementsByClassName("start")[0];
//遍历localStorage对象将key和value取出来存放到新的arr数组
for(vari=0;i${arr[index].key}:
`;
varcn=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=`这已经是最后一题了`
}
}
start.onclick=function(){
confirm('确定提交答案？');
location.href='result.html'
}

页面3JS

varall=document.getElementById("all");
varright=document.getElementById("right");
varwrong=document.getElementById("wrong");
all.innerHTML=sessionStorage.题库;
right.innerHTML=sessionStorage.right;
wrong.innerHTML=sessionStorage.wrong;
varstart=document.getElementsByClassName("start")[0];
varagain=document.getElementsByClassName("again")[0];
start.onclick=function(){
location.href="save.html";
}
again.onclick=function(){
location.href="test.html"
}

下面是两个web储存的图作为重点

重点是将数据存储到localStorage中再便利这个对象将键值对存储到数组中以便我们后续使用，界面2的内容是将数组的内容按照随机顺序摆放到页面中在input框失去焦点后进行判断对正确答案和错误答案进行保存（注意一定不能再点击下一个的时候进行判断因为此时的input框对应的数据内容以及改变）以便输出最后的数量其他一些注释已经写在代码中了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现英语单词题库

单词录入

热门推荐

随机推荐