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

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

实现原理：给每一个题目添加一个编号，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. vue 组件与传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  2. IOS 关于 NSUserDefault

    转载 并不是所有的东西都能往里放的.NSUserDefaults只支持: NSString, NSNumber, NSDate, NSArray, NSDictionary.   NSUserDefa ...

  3. Java多线程系列 基础篇09 Object.wait/notifyJVM源码实现

    转载 https://www.jianshu.com/p/f4454164c017 作者 占小狼 最简单的东西,往往包含了最复杂的实现,因为需要为上层的存在提供一个稳定的基础,Object作为java ...

  4. debian7 amd64版本添加对x86包的支持

    dpkg --add-architecture i386apt-get updateapt-get install ia32-libs ia32-libs-gtk

  5. Android4.4 GPS框架分析【转】

    本文转载自:http://blog.csdn.net/junzhang1122/article/details/46674569 GPS HAL层代码在目录trunk/Android/hardware ...

  6. ZOJ - 3430 Detect the Virus —— AC自动机、解码

    题目链接:https://vjudge.net/problem/ZOJ-3430 Detect the Virus Time Limit: 2 Seconds      Memory Limit: 6 ...

  7. 【LeetCode】最大子序和

    给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...

  8. Java多线程编程核心 - 对象及变量的并发访问

    1.什么是“线程安全”与“非线程安全”? “非线程安全”会在多个线程对同一对象总的实例变量进行并发访问时发生,产生的后果是“脏读”,也就是取到的数据其实是被更改过的. “线程安全”是以获得的实例变量的 ...

  9. Codeforces 854B Maxim Buys an Apartment：贪心

    题目链接:http://codeforces.com/contest/854/problem/B 题意: 有n栋房子从1到n排成一排,有k栋房子已经被售出. 现在你要买一栋“好房子”. 一栋房子是“好 ...

  10. 安装.NET Core 3.0预览版后VS项目目标框架中不显示的解决方法

    下载了微软在GitHub上的cSharpSamples项目后发现其中一些项目使用框架为.NET Core3.0,就下载了.NET Core3.0,但发现项目依然不可用,编译时提示如下 当前 .net ...