js实现考试随机选题

考试的时候经常用到，发在这里记录一下
基本信息包括：学号、姓名、题号、题目名称
实现原理：给每一个题目添加一个编号，JS生成随机数，遍历每一个学生，把题目根据生成的随机数作为题目编号放入学生信息中
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table{
         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:'长方形幻灯片'};