var students = [];

var lastName = ["赵","钱","孙","李","周","吴","王","许","文","刘","马","范","欧阳","翁","陈"];

var firstName = ["伸义","志泽","梦洁","皓轩","博文","懿轩","煜城","诗茵","子轩","梦璐","凌菲","天磊"];

//学生的函数构造器

function Student(id,lastName,firstName,age,score) {

this.id = id;

this.lastName = lastName;

this.firstNmae = firstName;

this.age = age;

this.score = score;

}

//生成num个学生

var produceStudent = function(num) {

console.log("开始生成学生");

for(var i=0;i

var lastNameIndex = Math.floor(Math.random()*lastName.length);

var firstNameIndex = Math.floor(Math.random()*firstName.length);

var randomAge = Math.floor(Math.random()*3) + 15;

var randomScore = Math.floor(Math.random()*(100+1));

var student = new Student(i+1,lastName[lastNameIndex],firstName[firstNameIndex],randomAge,randomScore);

students.push(student);

}

console.log("所有学生生成成功");

return students;

};

//渲染学生数据

var renderStudent = function(array) {

var html = [];

html.push("

");

html.push("

5班成绩统计

");

html.push("刷新")

html.push("

");

html.push("

html.push("

");

html.push("

序号");

html.push("

姓名");

html.push("

年龄");

html.push("

成绩");

html.push("

");

for(var j=0;j

if(j%2 == 1) {

html.push("

");

} else {

html.push("

");

}

//给每位学生填入数据

html.push("

" + array[j].id + "");

html.push("

" + array[j].lastName + array[j].firstNmae +"");

html.push("

" + array[j].age + "");

html.push("

" + array[j].score + "");

html.push("

");

}

html.push("

")

return html;

}

var allStudent = produceStudent(50); //生成学生

var allHtml = renderStudent(allStudent); //渲染学生数据

document.getElementById("scoreTable").innerHTML = allHtml.join(""); //所有html加入文档

document.getElementById("refresh").onclick = function() {

window.location.reload();

};

简单成绩表html,用js来写html的一个小小随机生成成绩表相关推荐

  1. 人员考勤,MySQL数据库一个表自动生成3表筛选人员迟到早退缺勤

    人员考勤,MySQL数据库一个表自动生成3表筛选人员迟到早退缺勤 </h1><div class="clear"></div><div c ...

  2. C语言随机生成成绩排序,如何实现以下功能给出1000个通过随机数生成的数据,分别用直接插入排序法、冒泡排序法、快速排序法进行排序...

    已结贴√ 问题点数:20 回复次数:2 如何实现以下功能给出1000个通过随机数生成的数据,分别用直接插入排序法.冒泡排序法.快速排序法进行排序 #include #include #include ...

  3. html中js添加或删除activex,JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())...

    var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...

  4. java算法:随机生成英文单词表快速查询含有和不含有的单词(不考虑大小写)

    列如输入字符串a,就会查询所有含a的单词和不含有a的单词,输入ab就会查询有a和b package test5; import java.util.ArrayList; import java.uti ...

  5. 2.27√ 2.25的条件下作两点修改:表AB可能存在值相同的元素,但新生成的表C的元素值各不相同;利用A表空间存放表C

    #include<stdio.h> #include<malloc.h> #include <stdlib.h> #define maxsize 10typedef ...

  6. php 随机生成数据表名,php 随机生成姓名

    /** * @param integer $sex 1 男 2 女 0 不限 * @param string $x 固定姓 * @param boolen $fx 是否加入复姓 true 是 fals ...

  7. Vue.js+ElementUI+vant生成动态表单配置

    前言 我司最近在搭建一款后台管理系统,使用的是Vue全家桶配合Element-ui,遇到一个问题,需要处理很多的表单,所以想到的解决方案是通过后台配置生成动态表单,这对于我来说也算是新的挑战,涉及的功 ...

  8. 多表关联查询过滤条件写在on与where后的区别

    点击上方"蓝字" 关注我们,享更多干货! SQL优化过程中,发现开发人员在写多表关联查询的时候,对于谓词过滤条件的写法很随意,写在on后面与where后面的情况均有,这可能会导致没 ...

  9. django自动生成问卷表的软件的设计与实现毕业设计源码291138

    摘 要 本论文主要论述了如何使用PHP语言开发一个自动生成问卷表的软件的设计与实现,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述自 ...

最新文章

  1. Windows和Linux下通用的线程接口
  2. display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路
  3. java wait 线程安全吗_Java多线程中的wait与notify
  4. 动手理解Vue导航守卫
  5. Linux vim进入编辑模式
  6. 零基础学Python-爬虫-1、网络请求Requests【网络操作理论基础与实践·请认真看看理论,理论基础决定后期高度】
  7. 物联网与万物互联有什么区别?
  8. 字符串匹配算法——KMP算法学习
  9. 多目标数据关联基本方法
  10. 在cmd命令行运行一个python脚本
  11. 大数据学习第一章:初识大数据
  12. openflow交换机 ryu_ryu—交换机
  13. jfreechart-x轴刻度倾斜45度
  14. 头条python后台一面凉经
  15. python去除空行_python中去掉空行的问题
  16. 阿里云服务(四)—云数据库RDS
  17. 魏文王问扁鹊的注释_魏文王问扁鹊曰阅读答案与翻译
  18. 写给大学时期自己的寄语
  19. 工作经验和工作经历区别很大
  20. 计算机ata考试教案,ATA办公软件考级教案(四).docx

热门文章

  1. 深度学习中使用显卡的介绍
  2. matlab simulink模型打开或者运行时就自动退出
  3. Integer Inquiry
  4. 基于Multisim的三极管放大,失真模拟仿真设计
  5. 机器视觉系统简介和组成
  6. 淘宝刷钻为何屡禁不止 透过现象看本质
  7. TiddlyWiki使用心得
  8. pywinauto客户端自动化---模拟鼠标操作
  9. java计算机毕业设计家装建材网源码+数据库+系统+lw文档+mybatis+运行部署
  10. php 高级 安全模式,拯救者按f几进安全模式