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

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

实现原理：给每一个题目添加一个编号，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. Win7 下安装MongoDB

    1).下载MongoDBhttp://downloads.mongodb.org/win32/mongodb-win32-i386-2.4.5.zip 下载Windows 32-bit版本并解压缩,程 ...

  2. Vue 数组中更新属性值后，视图不更新，等待其他元素更新后会触发的解决办法

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...

  3. PHP之面向对象PHP之面向对象（面向对象是什么）

    PHP之面向对象(面向对象是什么) 一.总结 一句话总结: 面向对象就是类:类都要 属性 和 方法 比如人:属性比如身高体重,方法比如吃饭喝水 面向对象中 ,方法即是函数 : 属性即是变量 ,只是面相 ...

  4. springMVC源代码阅读之servlet部分<一>servlet部分详解

    [一]servlet的概念

  5. pycharm+QT5+python3安装与环境配置

    开发环境: MAC OS 10.12.3 版本  Pycharm 2016.3.2 版本  Python 3.6.0 版本  PyQt5 5.8.1 版本 ( pyinstaller:将python代 ...

  6. ogg概叙、架构、进程

    一. OGG 概述 OGG 全称Oracle Golden Gate. 历史: Golden Gate公司于1995年成立于美国加州旧金山,它的名称源自旧金山闻名于世的金门大桥.两位创始人Eric F ...

  7. Python手记

    字符串的拼接 1.“+”,如果是字符和数字相连,要使用str()函数对于数字进行字符转化: 2.join() 3.",",链接的两个字符串之间用空格做关联 4.占位符 tmp += ...

  8. bzoj 4753 [Jsoi2016]最佳团体——0/1分数规划

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4753 0/1分数规划裸题. #include<iostream> #includ ...

  9. Docker入门（七）：部署app

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  10. RedisDesktopManager 可视化工具提示：无法加载键：Scan..

    原因是redis的版本过低,window下的redis-cli.exe客户端输入 info 命令可看到该redis的版本,这个scan查看要redis2.80版本以上!!!!