js实现考试随机选题

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

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

实现原理：给每一个题目添加一个编号，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实现考试随机选题的更多相关文章

Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
JS实现的随机乱撞的彩色圆球特效代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
！JS实战之随机像素图
JavaScript实例分享之----画随机像素图.随机像素图(作者自己取得名字)指的是一张图片上每一个像素的颜色都是随机的.此时应该能联想到这幅图多么眼花缭乱,好吧,我们用JS来实现它的原因是JS很 ...
js javascript 简易随机值穿插加解密【原】
适用场景本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...
js指定范围随机整数
js获取指定范围内随机整数,例如 6-10 (m-n) 计算公式: Math.floor(Math.random()*(n-m))+m // 6-10随机数,用循环得出一组测试随机数 var str ...
JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...
js抽奖概率随机取出数据(简单示例)
在平常活动开发当中,经常会碰到抽奖等类似的js功能,那么下面我们随机取数组中的一条来展示出来. ( 一 ) 无概率问题 var gift_ = ['apple pro一台','iphoneX一台',' ...
原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
JS对象实现随机满天小星星实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

PAT 天梯赛 L2-025. 分而治之【图】
题目链接 https://www.patest.cn/contests/gplt/L2-025 思路只要把被攻下的城市标记一下与其他城市之间的通路都取消然后判断一下剩下的城市是否都是孤立的 ...
6410开发板sd卡启动时烧写u-boot.bin以及u-boot-spl-16k.bin步骤
参考文档:<SMDK6410_IROM_APPLICATION NOTE_REV 1.00>(可以从这里下载到> 参考博客:Tekkaman的博文<u-boot-2010.09 ...
java 基础 - 查找某个字串出现的次数及位置
查找某个字串出现的次数及位置 public class search { public static void main(String[] args){ String str = "abc1 ...
css设置文件编码
在外部css文件的顶部,写入下面代码: @charset "UTF-8";
listen 64
Winning Athletes Engage in Arms Raise You see it when you watch almost any game: there's a touchdown ...
jvm file.encoding 属性引起的storm/hbase乱码
1. 问题今天为storm程序添加了一个计算bolt,上线后正常,结果发现之前的另一个bolt在将中文插入到hbase中后查询出来乱码.其中字符串是以UTF-8编码的url加密串,然后我使用的URL ...
C++之迭代器失效总结
1. 对于序列式容器(如vector,deque),序列式容器就是数组式容器,删除当前的iterator会使后面所有元素的iterator都失效.这是因为vetor,deque使用了连续分配的内存,删 ...
Trie 树内存消耗问题
大家都知道,Trie树(又称字典树)是一种树型数据结构,用于保存大量的字符串.它的优点是:利用字符串的公共前缀来节约存储空间. 相对来说,Trie树是一种比较简单的数据结构,比较易于理解.话说上帝是公 ...
普通项目转为maven项目及相关操作说明
普通项目转为maven项目及相关操作说明 1 原项目简述如图,一般的项目大致包括三类路径:src,源码路径:test,单元测试路径:lib第三方类包路径. 示例项目中,BaseDao类依赖于mysq ...
python 抓取美丽说店铺的宝贝图片及详细信息的实现（爬虫）
对于页面的抓取,我们使用的是requests,现在大部分的网站都支持动态加载,我们在firefox f12后查找动态的url :http://www.meilishuo.com/aj/shop_lis ...

js实现考试随机选题

js实现考试随机选题的更多相关文章

随机推荐

热门专题