简单成绩表html,用js来写html的一个小小随机生成成绩表
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的一个小小随机生成成绩表相关推荐
- 人员考勤,MySQL数据库一个表自动生成3表筛选人员迟到早退缺勤
人员考勤,MySQL数据库一个表自动生成3表筛选人员迟到早退缺勤 </h1><div class="clear"></div><div c ...
- C语言随机生成成绩排序,如何实现以下功能给出1000个通过随机数生成的数据,分别用直接插入排序法、冒泡排序法、快速排序法进行排序...
已结贴√ 问题点数:20 回复次数:2 如何实现以下功能给出1000个通过随机数生成的数据,分别用直接插入排序法.冒泡排序法.快速排序法进行排序 #include #include #include ...
- html中js添加或删除activex,JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())...
var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...
- java算法:随机生成英文单词表快速查询含有和不含有的单词(不考虑大小写)
列如输入字符串a,就会查询所有含a的单词和不含有a的单词,输入ab就会查询有a和b package test5; import java.util.ArrayList; import java.uti ...
- 2.27√ 2.25的条件下作两点修改:表AB可能存在值相同的元素,但新生成的表C的元素值各不相同;利用A表空间存放表C
#include<stdio.h> #include<malloc.h> #include <stdlib.h> #define maxsize 10typedef ...
- php 随机生成数据表名,php 随机生成姓名
/** * @param integer $sex 1 男 2 女 0 不限 * @param string $x 固定姓 * @param boolen $fx 是否加入复姓 true 是 fals ...
- Vue.js+ElementUI+vant生成动态表单配置
前言 我司最近在搭建一款后台管理系统,使用的是Vue全家桶配合Element-ui,遇到一个问题,需要处理很多的表单,所以想到的解决方案是通过后台配置生成动态表单,这对于我来说也算是新的挑战,涉及的功 ...
- 多表关联查询过滤条件写在on与where后的区别
点击上方"蓝字" 关注我们,享更多干货! SQL优化过程中,发现开发人员在写多表关联查询的时候,对于谓词过滤条件的写法很随意,写在on后面与where后面的情况均有,这可能会导致没 ...
- django自动生成问卷表的软件的设计与实现毕业设计源码291138
摘 要 本论文主要论述了如何使用PHP语言开发一个自动生成问卷表的软件的设计与实现,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述自 ...
最新文章
- Windows和Linux下通用的线程接口
- display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路
- java wait 线程安全吗_Java多线程中的wait与notify
- 动手理解Vue导航守卫
- Linux vim进入编辑模式
- 零基础学Python-爬虫-1、网络请求Requests【网络操作理论基础与实践·请认真看看理论,理论基础决定后期高度】
- 物联网与万物互联有什么区别?
- 字符串匹配算法——KMP算法学习
- 多目标数据关联基本方法
- 在cmd命令行运行一个python脚本
- 大数据学习第一章:初识大数据
- openflow交换机 ryu_ryu—交换机
- jfreechart-x轴刻度倾斜45度
- 头条python后台一面凉经
- python去除空行_python中去掉空行的问题
- 阿里云服务(四)—云数据库RDS
- 魏文王问扁鹊的注释_魏文王问扁鹊曰阅读答案与翻译
- 写给大学时期自己的寄语
- 工作经验和工作经历区别很大
- 计算机ata考试教案,ATA办公软件考级教案(四).docx