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

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

用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<=z;j++){qq=0;b=das[j-1];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;    qq=1;break;                }}if(qq==0){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)'; }}

效果如下

整体差不多了，想到自己写作业的时候爱听歌，就插了一个音乐盒子的插件

效果如下

有个小bug这个音乐盒子不能自动播放，如果有会解决的大佬一定要告诉我哦。

食用方法：

要有这样样式的文本

然后把你的题全部复制粘贴像这样

然后ctrl+h进行替换（替换A,B,C,D为<button>A、</button>，<button>B、</button>.....一共四次替换)

不要替换错了哦

以此方法在次替换（答案：A 替换

</div> 依次把B,C,D替换就全部ok了

替换的注意事项：如果有多选题请先替换四个选项的答案然后替换三个选项答案

自行添加自己喜欢的音乐，完整代码里有备注。

源码分享https://pan.baidu.com/s/1hrIuWVoFUURSoIyUSoYH8Q 提取码: fjc1

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

css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
web版拳皇，使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏游戏简介 <拳皇>是1994年日本SNK公司旗下在MVS游戏机板上发售的一款著名对战型格斗街机游戏,简称"KOF&qu ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计...
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
html2canvas 一个强大的使用js开发的浏览器网页截图工具
html2canvas是一个JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas通过获取页面的DOM和元素的样式信息,并 ...
运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页我所做的和它相差不多不 ...
html +css +js+jq学习
html 1 标签的使用和属性 https://blog.csdn.net/weixin_41530824/article/details/82261561 具体可以参考这个 css 选择器关于浮 ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
html+css+js:简单制作米游社原神观测枢·攻略专栏
忙忙碌碌了五六天总算是整出来了这个项目,老规矩先给大家看看我的效果图. 目录效果图: 一.背景的固定二.分页器(小点)形状的改变三.运用js监听滑轮使导航背景色发生改变四.js书写点击回到顶部 ...

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

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

最新文章

热门文章