网页效果：

代码部分:

<!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. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...

  2. mvc中Scripts.Render的用法

    第一次接触新的东西,都会很陌生,但是时间久了就熟悉了变简单了. 视图文件中使用Scripts.Render()输出脚本包,Styles.Render()输出样式包 上面两张图是我所做项目里的,放上面会 ...

  3. Fabric1.4源码解析：客户端创建通道过程

    在使用Fabric创建通道的时候,通常我们执行一条命令完成,这篇文章就解析一下执行这条命令后Fabric源码中执行的流程. peer channel create -o orderer.example ...

  4. spark 源码分析之四 -- TaskScheduler的创建和启动过程

    在 spark 源码分析之二 -- SparkContext 的初始化过程 中,第 14 步 和 16 步分别描述了 TaskScheduler的 初始化 和 启动过程. 话分两头,先说 TaskSc ...

  5. Kafka 学习之路（二）—— 基于ZooKeeper搭建Kafka高可用集群

    一.Zookeeper集群搭建 为保证集群高可用,Zookeeper集群的节点数最好是奇数,最少有三个节点,所以这里搭建一个三个节点的集群. 1.1 下载 & 解压 下载对应版本Zookeep ...

  6. ZooKeeper学习之路（二）—— Zookeeper单机环境和集群环境搭建

    一.单机环境搭建 1.1 下载 下载对应版本Zookeeper,这里我下载的版本3.4.14.官方下载地址:https://archive.apache.org/dist/zookeeper/ # w ...

  7. 洛谷 题解 UVA658 【这不是bug，而是特性 It's not a Bug, it's a Feature!】

    [题意] 补丁在修正\(BUG\)时,有时也会引入新的\(BUG\),假定有\(n(n<=20)\)个潜在\(BUG\),和\(m(m<=100)\)个补丁,每个补丁用两个长度为\(n\) ...

  8. SwiftLint：代码规范检查工具介绍

    Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...

  9. MySql EF事务using不会自动 Rollback的bug

    EF to MySql一般都是用using最后Commit,一直以为最后没Commit,当using调用Dispose会自动Rollback,没想到这儿有个坑,mysql有个bug并不会Rollbac ...

  10. filebeat直连elasticsearch利用pipeline提取message中的字段

    这里使用filebeat直连elasticsearch的形式完成数据传输,由于没有logstash,所有对于原始数据的过滤略显尴尬(logstash的filter非常强大). 但是由于业务需求,还是需 ...