js实现table中获取不同td的值,并且md5加密,匹配md5的值(避免通过查看网页源代码可以看到正确答案),再用js前端判断输入与正确的值是否相同。最后再把错误的单词计数,并且输出,后端加入对应错误的数据库表中。

html代码片段:

<div class="col-md-11">
<table class="table table-common table-bordered">
<tr>
<th>序号</th>
<th colspan="2">中文</th>
<th colspan="2">英文</th>
<th>序号</th>
<th colspan="2">中文</th>
<th colspan="2">英文</th>
</tr>
<tbody class="tbody" name="Tbody1" id="tbody1">
{% for todayword1 in todayword1list%}
<tr id="tr{{ todayword1.todayword1_id }}">
<td style="display:none;">{{ todayword1.todayword1_id }}</td>
<td class="number" id="td{{todayword1.todayword1_id}}"></td>
<td colspan="2" height="60px">{{ todayword1.todayword1_chinese }}</td>
<td colspan="2"><input id="input{{ todayword1.todayword1_id }}" name="Input{{ todayword1.todayword1_id }}" type="text" value="" class="form-control" placeholder="请填写英文"/></td>
<td style="display:none;">{{ todayword1.todayword1_english }}</td>
<td height="60px" style="display:none;" ></td>
<td height="60px" style="display:none;"><button id="btn_read3" class=" read" onclik="word_detail({{ todayword1.todayword1_id }})" title="查看">查看</button></td>
{% for todayword2 in todayword1.todayword2s%}
<td style="display:none;">{{ todayword2.todayword2_id }}</td>
<td class="number" id="td{{todayword2.todayword2_id}}"></td>
<td colspan="2" height="60px">{{ todayword2.todayword2_chinese }}</td>
<td colspan="2"><input id="input{{ todayword2.todayword2_id }}" name="Input{{ todayword2.todayword2_id }}" type="text" value="" class="form-control" placeholder="请填写英文"/></td>
<td style="display:none;">{{ todayword2.todayword2_english }}</td>
<td height="60px" style="display:none;" ></td>
<td height="60px" style="display:none;"><button id="btn_read3" class=" read" onclik="word_detail({{ todayword2.todayword2_id }})" title="查看">查看</button></td>
{%end%}
</tr>
{%end%}
</tbody>
</table>
</div>
<button id="submit_word" name="Submit_word" onclick="submit_word()" class="btn btn-info">提交</button>
<a id="retest_word" name="Retest_word" href="/remember_word_temp" style="display:none;" onclick="retest_word()" class="btn btn-info">重新测试</a>

js代码:

var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function submit_word(){
var x = 0;//计算错误单词量
document.getElementById("submit_word").style.display = "none";
document.getElementById("retest_word").style.display = "";
var t = document.getElementById("tbody1");
for(var i=0;i<t.rows.length;i++){
t.rows[i].cells[3].style.display = "none";//奇数单词input
t.rows[i].cells[5].style.display = "";//填写的单词文本
t.rows[i].cells[6].style.display = "";//查看按钮
t.rows[i].cells[10].style.display = "none";//偶数单词input
t.rows[i].cells[12].style.display = "";//填写的单词文本
t.rows[i].cells[13].style.display = "";//查看按钮 var word_id1 = t.rows[i].cells[0].innerHTML;//奇数单词编号
var word_id2 = t.rows[i].cells[7].innerHTML;//偶数单词编号
var word_ip1 = t.rows[i].cells[3].getElementsByTagName("INPUT")[0].value;
var md5_wordip1 = hex_md5(word_ip1); //输入的奇数单词MD5加密
//alert(word_ip1); //奇数单词输入框
var word_english1 = t.rows[i].cells[4].innerHTML;//奇数单词英文值
//alert(word_english1); //偶数单词输入框
var word_ip2 = t.rows[i].cells[10].getElementsByTagName("INPUT")[0].value;
var md5_wordip2 = hex_md5(word_ip2); //输入的偶数单词MD5加密
//alert(word_ip2);
var word_english2 = t.rows[i].cells[11].innerHTML;//偶数单词英文值
//alert(word_english2); //偶数单词英文MD5加密
if(md5_wordip1==word_english1 ){
return true;
}
else{
t.rows[i].cells[5].style = "text-decoration:line-through;color:red;";
xmlhttp.open("GET", "add_errorword_action?error_word"=word_id1, false);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
x = x+1;
}
}
xmlhttp.send();
}
if(md5_wordip2==word_english2 ){
return true;
}
else{
t.rows[i].cells[12].style = "text-decoration:line-through;color:red;";
xmlhttp.open("GET", "add_errorword_action?error_word"=word_id2, false);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
x = x+1;
}
}
xmlhttp.send();
}
var y= t.rows.length*2-x;//计算正确的单词量
alert("共错误" + x + "个,正确" + y +"个单词");
document.getElementById("span_score").innerHTML = y;
}
}

JS实现类似网页的测试考卷的更多相关文章

  1. 网页兼容性测试(工具使用IETESTER、Firefox、360安全浏览器)

    网页兼容性测试主要是针对不同的浏览器进行的测试.由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题.对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常显示 ...

  2. js实现类似页面广告一段时间自动打开一段时间自动关闭的功能

    js实现类似页面广告一段时间自动打开一段时间自动关闭的功能 一.总结 Window 对象的 open()方法:window.open('测试页面.html','news','height=300,wi ...

  3. 利用 JS 脚本实现网页全自动秒杀抢购

    利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...

  4. js实现打开网页自动弹出添加QQ好友邀请窗口

    我们有时进一些网面或专题页面会自动弹出一个加为好友的对话框了,在研究了很久之后发现可以直接使用js来实现,下面我们一起来看js实现打开网页自动弹出添加QQ好友邀请窗口的方法. 第一步.JS脚本 这个是 ...

  5. JS实现Web网页打印功能(IE)

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  6. JS远程获取网页源代码的例子

    js代码获取网页源代码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < ...

  7. JS 添加千分位,测试可以使用

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...

  8. JS 阻止整个网页的内容被选中

    pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...

  9. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

随机推荐

  1. git安装--linux下的安装

    一般linux自带git版本很旧,会有一定问题,可以先卸载系统自带git: yum remove git下载及安装git: wget https://github.com/git/git/archiv ...

  2. mongodb3.x用户角色

    用户和角色是多对多的关系,一个用户可以对应多个角色,一个角色可以拥有多个用户.用户角色的不同对应的权限也是不一样的.下面是一些分配给用户的常见的角色. read                    ...

  3. springMVC创建基础变量

    在springMVC中有一些变量是基础变量,可以在全局多个地方使用,在修改规则的时候,这样只用修改一个地方就好了,而且可以避免很多不必要的bug出现下面就来总结一下在我的项目中如何去创建一个全局基础变 ...

  4. Mysql undo与redo Log

    http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...

  5. Mysql 调用存储过程的两种方式

    一,使用call语句: 如:创建 call 调用: 使用占位符,通过prepare,execute调用:

  6. MyBatis 特殊字符处理

    http://blog.csdn.net/zheng0518/article/details/10449549

  7. C#的匿名函数

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  8. poj 1008:Maya Calendar(模拟题,玛雅日历转换)

    Maya Calendar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 64795   Accepted: 19978 D ...

  9. AJax中post与get请求注意事项

    在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...

  10. git clean 使用方法

    删除 一些 没有 git add 的 文件: git clean 参数 -n 显示 将要 删除的 文件 和  目录 -f 删除 文件,-df 删除 文件 和 目录 git clean -n git c ...