考试的时候经常用到，发在这里记录一下

基本信息包括： 学号、姓名、题号、题目名称

实现原理：给每一个题目添加一个编号，JS生成随机数，遍历每一个学生，把题目根据生成的随机数作为题目编号放入学生信息中

效果图：



代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    table{

        width: 1000px;

        margin: 50px auto;

        border-collapse: collapse;

        line-height: 30px;

        text-align: center;

    }

    caption{

        font-size: 30px;

        letter-spacing: 5px;

        line-height: 50px;

    }

    th,td{

        border: 1px #66667d solid;

    }

</style>

<body>

<table>

    <caption>随机选题</caption>

    <thead>

    <th>学号</th>

    <th>姓名</th>

    <th>题号</th>

    <th>题目名称</th>

    </thead>

    <tbody id="tbody">

    </tbody>

</table>

<template id="temp1">

    <tr>

        <td>{{student}}</td>

        <td>{{student_name}}</td>

        <td>{{topic}}</td>

        <td>{{topic_name}}</td>

    </tr>

</template>

<script src="js/data.js"></script>

<script>

    var htmlText='';

    var tbody=document.getElementById('tbody');

    var str=document.getElementById('temp1').innerHTML;

    var i,len=topic.length,arr=[];

    // 模板方法，适用于文本结构复杂情况

    student.forEach(function (el) {

        i=parseInt(Math.random()*len);

        arr.push(str.replace('{{student}}',el.no).replace('{{student_name}}',el.name)

            .replace('{{topic}}',topic[i].no).replace('{{topic_name}}',topic[i].name));

    });

    tbody.innerHTML=arr.join('');

    // 常用方法

    // student.forEach(function (el) {

    //     i=parseInt(Math.random()*len);

    //     htmlText+= '<tr><td>'+el.no+'</td><td>'+el.name+'</td><td>'+topic[i].no+'</td><td>'+topic[i].name+'</td></tr>'

    // });

    // tbody.innerHTML=htmlText;

</script>

</body>

</html>

学生数据表：

var student=[];

student[student.length]={no:'201658234069',name:'喜羊羊'};

student[student.length]={no:'201658234050',name:'李二'};

student[student.length]={no:'201658234066',name:'刘蛋蛋'};

student[student.length]={no:'201658234055',name:'李白'};

student[student.length]={no:'201658234056',name:'陆游'};

student[student.length]={no:'201658234057',name:'白居易'};

student[student.length]={no:'201658234058',name:'杜甫'};

student[student.length]={no:'201658234059',name:'李清照'};

student[student.length]={no:'201658234060',name:'苏轼'};

student[student.length]={no:'201658234063',name:'王安石'};

student[student.length]={no:'201658234064',name:'杜牧'};

student[student.length]={no:'201658234065',name:'邱清泉'};

student[student.length]={no:'201658234067',name:'辛弃疾'};

student[student.length]={no:'201658234068',name:'孟浩然'};

student[student.length]={no:'201658234069',name:'杨万里'};

student[student.length]={no:'201658234070',name:'欧阳修'};

student[student.length]={no:'201658234058',name:'范仲淹'};

student[student.length]={no:'201658234059',name:'王维'};

student[student.length]={no:'201658234060',name:'陶渊明'};

student[student.length]={no:'201658234063',name:'诗经'};

student[student.length]={no:'201658234064',name:'黄庭坚'};

student[student.length]={no:'201658234065',name:'屈原'};

student[student.length]={no:'201658234067',name:'司马迁'};

student[student.length]={no:'201658234068',name:'袁枚'};

student[student.length]={no:'201658234069',name:'韩非'};

student[student.length]={no:'201658234070',name:'范成大'};

var topic=[];

topic[topic.length]={no:'1',name:'event测试'};

topic[topic.length]={no:'2',name:'flash动画框架'};

topic[topic.length]={no:'3',name:'仿土豆天气预报'};

topic[topic.length]={no:'4',name:'发微博'};

topic[topic.length]={no:'5',name:'右键菜单'};

topic[topic.length]={no:'6',name:'回车提交留言'};

topic[topic.length]={no:'7',name:'完美运动框架'};

topic[topic.length]={no:'8',name:'延时提示框'};

topic[topic.length]={no:'9',name:'数字时钟'};

topic[topic.length]={no:'10',name:'滚动条'};

topic[topic.length]={no:'11',name:'简易日历'};

topic[topic.length]={no:'12',name:'虚框拖拽'};

topic[topic.length]={no:'13',name:'表单'};

topic[topic.length]={no:'14',name:'运行代码'};

topic[topic.length]={no:'15',name:'键盘事件游戏'};

topic[topic.length]={no:'16',name:'长方形幻灯片'};

js实现考试随机选题的更多相关文章

  1. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  2. JS实现的随机乱撞的彩色圆球特效代码

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

  3. ！JS实战之随机像素图

    JavaScript实例分享之----画随机像素图.随机像素图(作者自己取得名字)指的是一张图片上每一个像素的颜色都是随机的.此时应该能联想到这幅图多么眼花缭乱,好吧,我们用JS来实现它的原因是JS很 ...

  4. js javascript 简易随机值穿插加解密【原】

    适用场景 本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...

  5. js指定范围随机整数

    js获取指定范围内随机整数,例如 6-10 (m-n) 计算公式: Math.floor(Math.random()*(n-m))+m // 6-10随机数,用循环得出一组测试随机数 var str ...

  6. JS操作CSS随机改变网页背景

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...

  7. js抽奖概率随机取出数据(简单示例)

    在平常活动开发当中,经常会碰到抽奖等类似的js功能,那么下面我们随机取数组中的一条来展示出来. ( 一 ) 无概率问题 var gift_ = ['apple pro一台','iphoneX一台',' ...

  8. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  9. JS对象实现随机满天小星星实例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. POJ - 3984 迷宫问题 【BFS】

    题目链接 http://poj.org/problem?id=3984 思路 因为要找最短路 用BFS 而且 每一次 往下一层搜 要记录当前状态 之前走的步的坐标 最后 找到最短路后 输出坐标就可以了 ...

  2. SQLSERVER安装记录

    很多人都喜欢重装编程环境,VS,SQL是最常见的 尤其是SQL,在删除所有的SQL相关的组件之后(360),记得再次打开控制面板,查看是否有漏掉的,本人就有一个SQLXML没有删除掉 在删除之后,清理 ...

  3. 脚本简介jQuery微信开放平台注册表单

    脚本简介jQuery微信开放平台注册表单是一款仿微信开放平台的选项卡带步骤的注册表单验证jQuery代码 分享自:http://www.huiyi8.com/jiaoben/ 下载地址:http:// ...

  4. Win7、Win8、Win10始终以管理员身份运行程序。

    在Win7.Win8.Win10系统中,以管理员身份运行程序很麻烦,一般有以下几种方式: 1.在可执行程序或快捷方式上右键,以管理员身份运行: 2.在可执行程序或快捷方式上右键->属性-> ...

  5. JavaUtil_03_图片处理工具类

    一.源码 功能:缩放图像.切割图像.图像类型转换.彩色转黑白.文字水印.图片水印等 package com.ray.dingtalk.util; import java.awt.AlphaCompos ...

  6. struts2 validate手动验证

    我们前面学习struts2知道,struts2通过拦截器实现了一些验证操作. 比如,如果是不能转换的类型在action中接受的话会跳转到错误页面,错误信息中会包含对应的错误信息,例如: 首先我们了解一 ...

  7. 【HDU 3487】Play with Chain Splay

    题意 给定$n$个数序列,每次两个操作,将区间$[L,R]$拼接到去掉区间后的第$c$个数后,或者翻转$[L,R]$ Splay区间操作模板,对于区间提取操作,将$L-1$ Splay到根,再将$R+ ...

  8. linux命令学习笔记（23）：Linux 目录结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件 目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下 ...

  9. umount 卸载 无响应的 NFS 文件系统

    当NFS Client 无法访问 NFS Server的适合,在Client上df操作等就会挂起. 这个适合需要将挂载的NFS卸载掉.在不知道挂载点的情况下,可以使用nfsstat -m 命令来查看. ...

  10. MySQL多个条件以什么表当做主条件表_20161111周五

    前两天有事情 停了2天 数据需求:1.活动日期11.8-11.10订单2.单笔订单购买A类产品 B类产品满足68元.且连续3天下单的用户ID 首先第一个条件很简单,主要是第二个条件 第二个条件是 且 ...