答题卡系统: 网站运行效果

代码区域:

HTML 代码:

<style type="text/css">
body {
font-size: 30px;
background: beige;
font-family: "宋体";
} #container {
margin: 1px auto; /*调整边缘*/
} #box {
overflow: hidden; /*隐藏溢出;*/
} #box label {
margin-top: 5px; /*上边距*/
background: #cde6c7;
width: 80px;
display: inline-block; /*显示内连*/
text-align: right; /*排列文本*/
margin-left: 50px;
}
</style>

js 代码:

<script type="text/javascript">
window.onload = function() {
var row = ;//行
var col = ;//列
var mybody = document.getElementById('mybody');
if (col > ) {
//设置样式 宽度
mybody.style.width = document.body.scrollWidth + (col - ) * ;
} initOptions(row, col);
var btn = document.getElementById("F");
var btn2 = document.getElementById('d');
btn2.onclick = names;
btn.onclick = btnClick;
//创建一个rchoice
var cbxs = document.getElementsByName("rchoice");
for (var i = ; i < cbxs.length; i++) {
cbxs[i].style.cssText = "margin-left:20px;";
}
};
//调度方法 打印行和列
function btnClick() {
var a = document.getElementById("a");
var b = document.getElementById("b");
var hang = a.value;
var lie = b.value;
initOptions(hang, lie); };
//判断用户名是否存在
function names() {
var text = document.getElementById('c');
var name = text.value;
if (name != "") {
alert("OK");
} else {
alert('请填写用户名'); }
}
//动态加载答题区控件!
function initOptions(row, column) {
//创建一个box
var box = document.getElementById('box');
box.innerHTML = "";
//题目编号,从0开始
var count = ;//计算题目编号
var mytag; //CheckBox的Tag属性值
for (var i = ; i <= row; i++) {
count++;
var mydiv = document.createElement("div");
box.appendChild(mydiv);//获取子节点
mydiv.style.overflow = "auto";
for (var j = ; j <= column; j++) { //默认j的值为2
//创建一个label
var label = document.createElement('label');
//设置座位号
if (j == ) {
label.innerHTML = count + "题";
mytag = count; } else { //多列的情况下创建题目编号的方式
label.innerHTML = (count + row * (j - )) + "题";
mytag = count + row * (j - );
} var littlediv = document.createElement("div");
littlediv.style.float = "left";
mydiv.appendChild(littlediv);
littlediv.appendChild(label); //创建四个选项
//第一个checkbox DOM Checkbox 对象
var cb1 = document.createElement("input");
cb1.setAttribute("type", "checkbox");
cb1.setAttribute("value", "A:" + mytag);
cb1.setAttribute("name", "rchoice");
var cbtxt = document.createTextNode("A");
littlediv.appendChild(cb1);
littlediv.appendChild(cbtxt); //第二个checkbox DOM Checkbox 对象
var cb2 = document.createElement("input");
cb2.setAttribute("type", "checkbox");
cb2.setAttribute("value", "B:" + mytag);
cb2.setAttribute("name", "rchoice");
var cbtxt2 = document.createTextNode("B");
littlediv.appendChild(cb2);
littlediv.appendChild(cbtxt2); //第三个checkbox DOM Checkbox 对象
var cb3 = document.createElement("input");
cb3.setAttribute("type", "checkbox");
cb3.setAttribute("value", "C:" + mytag);
cb3.setAttribute("name", "rchoice");
var cbtxt3 = document.createTextNode("C");
littlediv.appendChild(cb3);
littlediv.appendChild(cbtxt3); //第四个checkbox DOM Checkbox 对象
var cb4 = document.createElement("input");
cb4.setAttribute("type", "checkbox");
cb4.setAttribute("value", "D:" + mytag);
cb4.setAttribute("name", "rchoice");
var cbtxt4 = document.createTextNode("D");
littlediv.appendChild(cb4);
littlediv.appendChild(cbtxt4);
var myline = document.createElement("br");
if (j == column) {
mydiv.appendChild(myline);
}
}
}
}
</script>

Body 里:

<body id="mybody">
<div class="mybody"></div>
<span class="o"> 行: <input id="a">列: <input id="b"> <button id="F">生成</button> 姓名: <input type="text" id="c"> <button id="d">提交</button> <br> <br> <div id="container">
<div id="box"></div>
</div>
</span>
</body>

JS制作简易的考试答题管理系统的更多相关文章

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

    网页效果: 代码部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  3. 【带着canvas去流浪(13)】用Three.js制作简易的MARVEL片头动画(下)

    目录 一. 模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 示例代码托管在:http://www.github.com/dashnowords/blogs 博 ...

  4. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  5. 【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)

    目录 一. 大作业说明 二.基本思路 三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码 四.小结 示例代码托管在:http://www.g ...

  6. 使用node.js制作简易爬虫

    最近看了些node.js方面的知识,就像拿它来做些什么.因为自己喜欢摄影,经常上蜂鸟网,所以寻思了一下,干脆做个简单的爬虫来扒论坛的帖子. 直接上代码吧. var sys = require(&quo ...

  7. 原生JS制作简易Tabs组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. commander.js 制作简易的 MINA CLI 脚手架

    出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...

  9. 用JS制作简易选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

随机推荐

  1. springboot读取本地项目文件

    在读取springBoot+gradle构建的项目时,如果使用传统的FileInputStream读取文件流或者ResourceUtils工具类的方式 File file= ResourceUtils ...

  2. OpenProj打开不了或者提示”Failed to load Java VM Library”的错误的解决方案

    一.双击打开OpenProj.exe没反应的解决方案: 1) 修改OpenProj1.4.0.ini,将Maximum Version=any改为Maximum Version=1.7,保存. 2)这 ...

  3. 第一章 corejava的入门

    第一章 corejava的入门一:什么是语言语言=os+数据结构+算法+思想os:操作系统数据结构:队,栈,二叉树,链表算法:做游戏开发时非常重要面试题:int a>0,b>0只使用一条输 ...

  4. Windows 命令行文本操作

    Windows下文件操作,大部分的时候用的都是用Windows 资源管理器(就是双击 “我的电脑” 的时候看到的图形界面). 接下来,以Windows命令行下操作文本为例,看看命令行在操作文件方面有多 ...

  5. IAR for STM8的简介、下载、安装及注册教程

    一.简介 1.关于IAR for STM8 IAR for STM8 是一个嵌入式工作平台,主要应用于STM8 系列芯片的开发,现在(2018年3.10版本)能够支持市面上所有的STM8芯片. 个人认 ...

  6. 关于C51 keil使用中.c文件的链接心得

    这个问题一直烦了我很久,使用C51 keil进行.c文件链接的时候,老是报错诸如下面的信息: *** ERROR L104: MULTIPLE PUBLIC DEFINITIONS SYMBOL: a ...

  7. 渐进式web应用开发---service worker (二)

    阅读目录 1. 创建第一个service worker 及环境搭建 2. 使用service worker 对请求拦截 3. 从web获取内容 4. 捕获离线请求 5. 创建html响应 6. 理解 ...

  8. php如何定义数组常量

    是这样吗?<?php define('BEST_PHPER',array('name'=>'巩文','address'=>'china')); My God,明确告诉你不可以:原因是 ...

  9. spring源码深度解析— IOC 之 bean 的初始化

    一个 bean 经历了 createBeanInstance() 被创建出来,然后又经过一番属性注入,依赖处理,历经千辛万苦,千锤百炼,终于有点儿 bean 实例的样子,能堪大任了,只需要经历最后一步 ...

  10. 跟着大彬读源码 - Redis 4 - 服务器的事件驱动有什么含义?(上)

    众所周知,Redis 服务器是一个事件驱动程序.那么事件驱动对于 Redis 而言有什么含义?源码中又是如何实现事件驱动的呢?今天,我们一起来认识下 Redis 服务器的事件驱动. 对于 Redis ...