网页效果：

代码部分:

<!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. 给你的 GitHub Repository 加上 sponsor 按钮

    「本文微信公众号 AndroidTraveler 首发」 背景 其实之前 GitHub 就已经说过要给开源的开发者提供赞助支持. 当你进入 GitHub 主页时,你会在右边发现一个 Tips. 点击进 ...

  2. 第二章 python如何运行程序

    一.python解释器介绍 Python解释器是一种让程序运行起来的程序.实际上,解释器是代码与机器的计算机硬件之间的软件逻辑层.当Python包安装在机器上后,它包含了一些最小化的组件:一个解释器和 ...

  3. .NET平台简介

    前言: 看到一个名词:搜商(SQ),还挺有趣.讲的是在互联网时代,怎么能够快速找到自己所需信息或资源,成为一种能力,并将其提升到类似智商.情商的概念.在以后工作过程中,尽量提高自己获取.辨别.处理信息 ...

  4. 【UVA - 11624】Fire!

    -->Fire! 直接上中文 Descriptions: 乔在迷宫中工作.不幸的是,迷宫的一部分着火了,迷宫的主人没有制定火灾的逃跑计划.请帮助乔逃离迷宫.根据乔在迷宫中的位置以及迷宫的哪个方块 ...

  5. 【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 ...

  6. 【朝花夕拾】Android自定义View篇之（六）Android事件分发机制（中）从源码分析事件分发逻辑及经常遇到的一些“诡异”现象

    前言 转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...

  7. QDomDocument 读取和编辑xml文件

    Qt中几种操作xml的方式 流方式 sax方式 dom方式 初学时,我常常采用流方式读取xml,该方式简单直观,容易理解.之后遇到了需要修改xml并重新写回的情况,流方式就显得捉襟见肘了. sax方式 ...

  8. springboot集成mockito与powermock

      mockito大家都比较熟悉了,存在或者不存在,都不要紧,mockito让你有一种只要一出手,就知道有没有的感觉.但是它也不是万能的,比如静态方法.私有方法,它就无能为力了.这是为什么呢?当然不是 ...

  9. python查询elasticsearch（Query DSL） 实例

    import datetime import sys import getopt import hashlib from elasticsearch import Elasticsearch &quo ...

  10. C++ 洛谷 P1731 [NOI1999]生日蛋糕

    P1731 [NOI1999]生日蛋糕 一本通上也有. 这TM是一道极其简单的深搜剪枝(DP当然可以的了,这里我只讲深搜). 首先圆柱公式:(有点数学基础都知道) V=πR2H S侧=π2RH S底= ...