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

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

实现原理：给每一个题目添加一个编号，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. win10系统使用clover时程序崩溃的解决

    1. 工具 --->  Internet选项 2. 程序选项卡 ---> 管理加载项 3.选择ExporerWatcher Class ---> 启用 win10对于未验证的程序状态 ...

  2. laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）

    laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结 一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高 优势:减轻数据库压力 缺 ...

  3. listen 75

    Hot Jupiters Smarten Search For Other Earths Scientists are looking for Earth like planets around ot ...

  4. array_1.array_map

    note: 为数组的每个元素应用回调函数 <?php $arr = [1, 2, 3]; $arr1 = array_map( function ($value) { return $value ...

  5. next enum in swift

    enum Iter: Int{ case s1=0, s2, s3, s4 mutating func next(){ if self == .s4 { self = .s1 return } sel ...

  6. Linux下安装二进制版mysql-8.0.15

    1.添加用户## 添加用户组groupadd mysql## 添加用户,指定用户home目录useradd -g mysql mysql -d /data/mysql## 解压下载的mysql二进制包 ...

  7. Python连接Mysql数据库_20160928

    python版本 2.7.1,python 连接mysql需要安装MYSQLdb模块 安装方法一种是cmd pip命令安装 pip install MySQLdb 一种是网上下载python MYSQ ...

  8. BZOJ4088: [Sdoi2015]立体图

    高一联赛之后不久写的.当时看到这题就感觉特别优美.那个时候啥都不会,就只会这种模拟题,还只会最暴力的方法.对于每个方向的灯,枚举每个位置,手动枚举所有遮挡效果,并在枚举位置过程中传递遮挡效果. con ...

  9. 「P4996」「洛谷11月月赛」 咕咕咕（数论

    题目描述 小 F 是一个能鸽善鹉的同学,他经常把事情拖到最后一天才去做,导致他的某些日子总是非常匆忙. 比如,时间回溯到了 2018 年 11 月 3 日.小 F 望着自己的任务清单: 看 iG 夺冠 ...

  10. ACM学习历程—HDU 1059 Dividing（dp && 多重背包）

    Description Marsha and Bill own a collection of marbles. They want to split the collection among the ...