初学一个月html，css，js，JQ制作的网页刷题

2024-06-30 14:03| 来源: 网络整理| 查看: 265

初学前端三件套总想用学的东西做点什么，这不老师发来期末的题库，要不用最近学的一些基础东西搞一个网页版的刷题软件，说干就干（文末有食用方法）。

用html，css写背景，越写越感觉自己写的太丑了，直接去找插件，省去好多事，但主要别人写的好看，推荐几个JQ插件的网址 jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)

jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)

超好用，主要大多免费。

修修改改大体背景就这样了。

开始今天的核心内容：怎么把老师的1000多到题弄到HTML并且判断正确和错误。当然用js了

整体思路应该是点击选项然后和答案匹配，用for循环进行匹配发现选项和答案顺序不匹配，but弄了几次都不行，只能换方法了。

先在这推荐一个好用的替换方法：ctrl+h可以用来替换文本选定内容。

继续：为什么我不去搞每个题有四个答案这样就可以解决选项和答案的编号可以一一对应通过点击事件然后对应判断答案的正确与否(用前面的替换方法替换）

代码实现

for (var i = 0; i < buts.length; i++) { var a=buts[i]; var b=das[i]; a.index =i; a.onclick=function() { b=das[this.index]; if(b.innerHTML==this.innerHTML) { this.style.background='green'; obj.src = "img/right.png"; var lili = obj.cloneNode(false); b.parentNode.appendChild(lili); this.disabled=true; } else { this.style.background='red'; obj.src = "img/wrong.png"; var lili = obj.cloneNode(false); b.parentNode.appendChild(lili); } } a.onmouseout=function() { this.style.background='rgb(151, 151, 163)'; } }

在判断条件里我又插入选错和选对而变得样式，鼠标离开事件，这里注意要用到cloneNode，否则插入图片只会出现一次。

最终效果如下

本以为搞定了，没想到才开始，我突然发现还有多选题 ........

一一匹配的梦破了，我开始想到的就是：得到四个选项然后遍历对应选项的答案

然后就是各种bug，最后请教宿舍大佬帮忙改进来一下，完美实现单选和多选共存

for (var i = 0; i < buts.length; i++) { a=buts[i]; a.index =i+1; a.onclick=function() { var j,z; if(this.index%4==0) { j=this.index-3; z=this.index; } else { j=this.index-this.index%4+1; z=this.index-this.index%4+4; } var qq; for(;j

【本文地址】

公司简介

联系我们