网页效果：

代码部分:

<!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制作简易的考试答题管理系统的更多相关文章

  1. JS制作简易的考试答题管理系统

    答题卡系统: 网站运行效果 代码区域: HTML 代码: <style type="text/css"> body { font-size: 30px; backgro ...

  2. 用jquery制作简易日历

    html代码如下: div align="center" id="divAll"> <table id="tab" border ...

  3. 简易版CMS后台管理系统开发流程

    目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...

  4. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  5. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  6. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  7. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  8. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  9. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

随机推荐

  1. Android WebView设置背景透明

    Adndroid 2.x的设置 在Android 2.x下,设置webview背景为透明的方法: wvContent.setBackgroundColor(0); Adndroid 4.0 由于硬件加 ...

  2. sqlserver/mysql按天，按小时，按分钟统计连续时间段数据

    文 | 子龙 有技术,有干货,有故事的斜杠青年 一,写在前面的话 最近公司需要按天,按小时查看数据,可以直观的看到时间段的数据峰值.接到需求,就开始疯狂百度搜索,但是搜索到的资料有很多都不清楚,需要自 ...

  3. 汇编入门二 一些概念与PC组件

    1.内存:想让CPU工作,必须提供指令与数据,而指令和数据存在于内存中. 2.指令和数据:有点抽象,上书(汇编语言 第二版): 3.存储单元:存储器(内存)被划分为多个存储单元,内个存储单元从0开始顺 ...

  4. python算法与数据结构-数据结构中常用树的介绍(45)

    一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...

  5. 基于 SpringBoot 的 FileService

    fileservice file upload download 1.支持多种存储服务器上传.下载 2.支持大文件切片上传 3.存储记录信息使用 redis记录, 文件id可用于与业务数据库关联 4. ...

  6. python函数之enumerate()

    enumrate 语法: # enumerate(sequence, [start=]) 参数:# sequence -- 一个序列.迭代器或其他支持迭代对象.# start -- 下标起始位置. 使 ...

  7. 【翻译】Keras.NET简介 - 高级神经网络API in C#

    Keras.NET是一个高级神经网络API,它使用C#编写,并带有Python绑定,可以在Tensorflow.CNTK或Theano上运行.其关注点是实现快速实验.因为做好研究的关键是:能在尽可能短 ...

  8. json数据转为对象，一般在前台把数据传回后端中使用 转https://www.cnblogs.com/zxtceq/p/6610214.html

    public static JArray GetData2JArray(string url, string key) { string jsonData = HttpHelper.HttpGet(u ...

  9. Log2Net日志查询网站代码解析

    在前面的几节中,我们介绍了Log2Net的使用方法和代码设计.使用这个组件,我们可以方便地将日志记录到数据库中,那么,我们怎么能看到这些日志呢?于是,日志查询网站应运而生.效果图如下: 该代码已开源, ...

  10. MySQL metalock的一些技巧（写大于读的案例，以及获得锁的顺序）

    前言:元数据锁不是锁定数据,而是锁定描述数据的元数据信息.就像很多装修工人(工作线程)在室内(对象上)装修(操作),不能有其他工人(线程)把屋子拆了(表删除了). MySQL 为了数据一致性使用元数据 ...