JQuery制作简易的考试答题管理系统
网页效果:
代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src='js/jQuery1.11.1.js'></script>
<script type="text/javascript">
//生成方法
function doclick(hang, lie) {
$("#body").empty();
//var hang = $('#hang').val();
//var lie = $('#lie').val();
var testNum = ;
var br = $('br');
for (var i = ; i < lie; i++) {
var div = buildHTML("div", {
id : "div" + i,
style : "margin:0 auto;width:260px;display:inline-block"
});
$("#body").css("width", * lie + "px").append(div);
for (var j = ; j < hang; j++) {
var span = buildHTML("span", testNum + "题", {
style : 'background : RGB(176,224,230)',
id : "span" + j
});
var A = buildHTML("input", 'A', {
type : "checkbox"
});
var B = buildHTML("input", 'B', {
type : "checkbox"
});
var C = buildHTML("input", 'C', {
type : "checkbox"
});
var D = buildHTML("input", 'D', {
type : "checkbox"
}); testNum++;
$('#div' + i).append(span).append(A).append(B).append(C)
.append(D).append("<br/>");
}
}
};
var BTNclick = function() {
var hang = $('#hang').val();
var lie = $('#lie').val();
doclick(hang, lie);
}
window.onload = function() {
doclick(, );
$('#btnSC').click(BTNclick);
}; buildHTML = function(tag, html, attrs) {
if (typeof (html) != 'string') {
attrs = html;
html = null;
}
var h = '<' + tag;
for (attr in attrs) {
if (attrs[attr] === false)
continue;
h += ' ' + attr + '="' + attrs[attr] + '"';
}
return h += html ? ">" + html + "</"+ tag + ">" : "/>";
};
</script>
<style type="text/css">
span {
font-family: '楷体';
font-size: 26px;
} #botom {
margin: auto;
width: 790px;
clear: both;
} #body {
margin: auto;
} body {
margin: auto;
background: RGB(, , );
}
</style>
</head>
<body>
<h2
style="font-family: '楷体'; color: blue; width: 242px; margin: 0 auto">考试成绩统计系统</h2>
<div id='body'></div>
<div id="botom">
<span>行:</span> <input type='text' id='hang'> <span>列:</span>
<input type='text' id='lie'> <input type="button" value='生成'
id='btnSC'> <span>姓名:</span> <input type="text" id='name'>
<input type="button" value="提交" id='btnTJ'>
</div>
</body>
</html>
JQuery制作简易的考试答题管理系统的更多相关文章
- JS制作简易的考试答题管理系统
答题卡系统: 网站运行效果 代码区域: HTML 代码: <style type="text/css"> body { font-size: 30px; backgro ...
- 用jquery制作简易日历
html代码如下: div align="center" id="divAll"> <table id="tab" border ...
- 简易版CMS后台管理系统开发流程
目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...
- 原生Js_制作简易日历
javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
随机推荐
- 给你的 GitHub Repository 加上 sponsor 按钮
「本文微信公众号 AndroidTraveler 首发」 背景 其实之前 GitHub 就已经说过要给开源的开发者提供赞助支持. 当你进入 GitHub 主页时,你会在右边发现一个 Tips. 点击进 ...
- 第二章 python如何运行程序
一.python解释器介绍 Python解释器是一种让程序运行起来的程序.实际上,解释器是代码与机器的计算机硬件之间的软件逻辑层.当Python包安装在机器上后,它包含了一些最小化的组件:一个解释器和 ...
- .NET平台简介
前言: 看到一个名词:搜商(SQ),还挺有趣.讲的是在互联网时代,怎么能够快速找到自己所需信息或资源,成为一种能力,并将其提升到类似智商.情商的概念.在以后工作过程中,尽量提高自己获取.辨别.处理信息 ...
- 【UVA - 11624】Fire!
-->Fire! 直接上中文 Descriptions: 乔在迷宫中工作.不幸的是,迷宫的一部分着火了,迷宫的主人没有制定火灾的逃跑计划.请帮助乔逃离迷宫.根据乔在迷宫中的位置以及迷宫的哪个方块 ...
- 【Mysql】重启: mysql.service: Service hold-off time over, scheduling restart.
参考链接:http://sharong.iteye.com/blog/2262760 重启mysql服务器 (/etc/init.d/mysql stop /etc/init.d/mysql sta ...
- 【朝花夕拾】Android自定义View篇之(六)Android事件分发机制(中)从源码分析事件分发逻辑及经常遇到的一些“诡异”现象
前言 转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...
- QDomDocument 读取和编辑xml文件
Qt中几种操作xml的方式 流方式 sax方式 dom方式 初学时,我常常采用流方式读取xml,该方式简单直观,容易理解.之后遇到了需要修改xml并重新写回的情况,流方式就显得捉襟见肘了. sax方式 ...
- springboot集成mockito与powermock
mockito大家都比较熟悉了,存在或者不存在,都不要紧,mockito让你有一种只要一出手,就知道有没有的感觉.但是它也不是万能的,比如静态方法.私有方法,它就无能为力了.这是为什么呢?当然不是 ...
- python查询elasticsearch(Query DSL) 实例
import datetime import sys import getopt import hashlib from elasticsearch import Elasticsearch &quo ...
- C++ 洛谷 P1731 [NOI1999]生日蛋糕
P1731 [NOI1999]生日蛋糕 一本通上也有. 这TM是一道极其简单的深搜剪枝(DP当然可以的了,这里我只讲深搜). 首先圆柱公式:(有点数学基础都知道) V=πR2H S侧=π2RH S底= ...