js实现考试随机选题

蔚落 2022-01-29 18:15 226阅读 0赞

考试的时候经常用到，发在这里记录一下  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70]  
代码：

<!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:'长方形幻灯片'};

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70]: /images/20220126/4bd90a3a63aa4dafa22a5b4614f5b4b8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现小球随机运动

效果图： ![在这里插入图片描述][20190929000852158.gif] HTML <div class='box'> <div cla

爱被打了一巴掌/ 2023年08月17日 16:31/ 0 赞/ 97 阅读

相关 js实现随机抽对象

需求：点击抽取对象每隔10ms 切换一张图片显示图片随机显示等待3s后图片停止切换注意：javascript里所需要的getRandom

淡淡的烟草味﹌/ 2022年09月11日 13:14/ 0 赞/ 123 阅读

相关随机过程考试经验

今天听说马季先生去世了,听闻之后很是震惊,我很喜欢的相声演员啊,不过也已经72岁了,听说之后纪念一下.今天考随机过程了,总体来说没有什么感觉,但是想到本科的时候总有师兄给我们提

雨点打透心脏的1/2处/ 2022年05月18日 01:20/ 0 赞/ 194 阅读

相关 JS实现——随机抽选获奖者

把之前写的一个小玩意记录下来：  <!DOCTYPE html> <html> <hea

深碍√TFBOYSˉ_/ 2022年04月04日 06:40/ 0 赞/ 153 阅读

相关 JS实现随机验证码

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的

待我称王封你为后i/ 2022年03月29日 09:41/ 0 赞/ 377 阅读

相关 js面向对象实现随机方块效果

先看看效果在看分析：[https://codepen.io/iyouu/pen/MdebQO][https_codepen.io_iyouu_pen_MdebQO] 首先，

客官°小女子只卖身不卖艺/ 2022年02月02日 14:57/ 0 赞/ 143 阅读

相关 js实现考试随机选题

考试的时候经常用到，发在这里记录一下效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

蔚落/ 2022年01月29日 18:15/ 0 赞/ 227 阅读

相关 js随机参数

1、通常使用ajax访问url添加 JS，ajax请求地址后加随机参数，比如XXXX?t= + new Date().getTime()。或者在url后面加一个随机

落日映苍穹つ/ 2022年01月28日 07:11/ 0 赞/ 169 阅读

相关 js随机抽奖

随机抽奖 <p>张三</p> <button>点击停止</button> var arr = ['张三','李四','老王','王五','周

今天药忘吃喽~/ 2022年01月28日 00:29/ 0 赞/ 232 阅读

相关原生JS实现随机点名项目

核心思想随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。所用知识 Math.random() \ num: 产生从0到n

朱雀/ 2021年12月03日 10:43/ 0 赞/ 231 阅读