网页效果：

代码部分:

<!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. python读取json文件并解析

    # -*- coding: utf-8 -*- import os import json import sys reload(sys) sys.setdefaultencoding('utf-8') ...

  2. 曹工说Tomcat2：自己撸一个简易Tomcat Digester

    一.前言 框架代码其实也没那么难,大家不要看着源码就害怕,现在去看 Tomcat 3.0的代码,保证还是看得懂一半,照着撸一遍基本上很多问题都能搞定了.这次我们就模拟 Tomcat 中的 Digest ...

  3. 本地线程-ThreadLocal

    线程本地存储是一个自动化机制,可以为使用相同变量的每个不同的线程都创建不同的存储.简单来说,就是对于某个变量,针对不同的线程存储不同的值. 实例: import java.util.Random; i ...

  4. jQuery中ajax-$.getJSON,$.getScript

    jQuery提供了两个特定异步加载的方法$.getJSON()方法和$.getScript()方法 $.getJSON()来加载特定的json文件 $.getScript()来加载特定的javascr ...

  5. Python基础-组织列表

    1.字符串的几个常用方法 name = ''adb lovelace '' name.title() 首字母大写 name.upper() 全部大写 name.lower() 全部小写 2.组织列表操 ...

  6. EditPlus VC2010 and 2008 C/C++配置

    源自:http://blog.csdn.net/weiling_shen/archive/2010/03/26/5421017.aspx 对于2010跟2008差不多,只需相应的修改一下路径即可:如2 ...

  7. HTML连载22-序选择器（下）

    一.子元素选择器 1. (1)选中标签之中只有一个子元素的子元素,并且那个标签必须使我们格式中前面指定的标签才行 (2)格式: 标签:only-chirld{属性:值:} (3)举例: p:only- ...

  8. Linux命令学习-cp命令

    Linux中,cp命令的全称是copy,主要作用是复制文件或文件夹,类似于Windows下的复制功能. 假设当前处于wintest用户的主目录,路径为 /home/wintest ,存在文件夹test ...

  9. python爬虫笔记之re.match匹配，与search、findall区别

    为什么re.match匹配不到?re.match匹配规则怎样?(捕一下seo) re.match(pattern, string[, flags]) pattern为匹配规则,即输入正则表达式. st ...

  10. [算法]Python判断一个点是否在多边形内部

    题目: 代码: # -*- coding:utf-8 -*- def rayCasting(p, poly): px = p['x'] py = p['y'] flag = False i = 0 l ...