网页效果：

代码部分:

<!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. 浅谈Java中的命名规范

    现代软件架构的复杂性需要协同开发完成,如何高效地协同呢? 答案是:制定一整套统一的规范. 无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没 ...

  2. 玩转Java多线程(Lock.Condition的正确使用姿势)

    转载请标明博客的地址 本人博客和github账号,如果对你有帮助请在本人github项目AioSocket上点个star,激励作者对社区贡献 个人博客:https://www.cnblogs.com/ ...

  3. lock和synchronized如何选择？

    1.lock是一个接口,而synchronized是java关键字,synchronized是内置的语言实现. 2.synchronized在发生异常时,会自动释放线程占有的锁,因此不会导致死锁,而l ...

  4. U盘刻录kali linux启动盘提示找不到镜像解决方案

    选择“继续”后会来到步骤菜单,选择从shell启动,命令 df -m 查看当前磁盘挂载情况,看到  /media 目录 输入命令 umount /media 进行挂载然后输入 exit 退出

  5. spring 5.x 系列第16篇 —— 整合dubbo (代码配置方式)

    文章目录 一. 项目结构说明 二.项目依赖 三.公共模块(dubbo-ano-common) 四. 服务提供者(dubbo-ano-provider) 4.1 提供方配置 4.2 使用注解@Servi ...

  6. meta 详解

    对meta标签用处的介绍,meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据.这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务. 组成 meta标签共有两个属性, ...

  7. SpringBoot(十九)_404返回统一异常处理结果

    之前写过一篇统一异常处理的文章,今天测试了下如果访问一个不存在的接口,也想返回统一的错误信息,应该怎么做 1.修改application.properties文件 # 自定义404 #出现错误时, 直 ...

  8. 每天学点node系列-stream

    在编写代码时,我们应该有一些方法将程序像连接水管一样连接起来 -- 当我们需要获取一些数据时,可以去通过"拧"其他的部分来达到目的.这也应该是IO应有的方式. -- Doug Mc ...

  9. HashMap原理(二) 扩容机制及存取原理

    我们在上一个章节<HashMap原理(一) 概念和底层架构>中讲解了HashMap的存储数据结构以及常用的概念及变量,包括capacity容量,threshold变量和loadFactor ...

  10. 找不到 main 方法

    前几天打开了好久不用的eclipse,发现报了个奇怪的错误 ***中找不到 main 方法, 请将 main 方法定义为: public static void main(String[] args) ...