流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>综合运用</title>
<style type="text/css">
body {
text-align: center;
font: 14px "微软雅黑";
}

td {
padding: 8px 10px;
}

table {
display: inline-block;
border: 5px solid #6495ED;
}

caption {
background-color: #6495ED;
color: white;
padding: 10px 5px;
}
</style>
</head>

<body>
<h1>流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表</h1> //monthArr[mydate.getMonth()] + '月'; 这里注意，直接导出getMonth的值，会比实际月份少1，这是因为，月份是从1-12，而getMonth返回的值则是从0-11，就和星期的返回方法是一样的。所以解决方法也一样，利用返回的值，当做数组的下标调用，对应出正确的月份。用alert(mydate.getMonth())才发现了这个问题，进而解决掉。所以说alert是调试bug的必备良药。
<!--
求和公式
var sum = 0;
for(var i=0;i<myArr.length;i++){
sum += myArr[i][1];
// alert(myArr[i][1]);
// document.write(myArr[i][0]+'<br />');
}
// document.write(sum);
document.getElementById('sum').innerText = sum;
求平均数
var pjf = sum/myArr.length;
document.getElementById('b').innerHTML = Math.round(pjf);
其他不成熟也不成功的小实验
// document.getElementById('b').innerText = Math.round(Math.sqrt(sum));//四舍五入（算术平方根（sum和的值））//document.write(Math.pow(Math.sqrt(sum),2));-->

<h1>法2——for循环制作表格</h1>
<script type="text/javascript">
//成绩信息
var myArr = [
['小明', 87],
['小花', 81],
['小红', 97],
['小天', 76],
['小张', 54],
['小小', 94],
['小西', 90],
['小舞', 66],
['小迪', 64],
['小曼', 76]
];
//月份
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
//星期
var day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var mydate = new Date(); //var year = mydate.getFullYear();

//日期
var datearr = [mydate.getFullYear() + '年', month[mydate.getMonth()] + '月', mydate.getDate() + '日', day[mydate.getDay()]];

//总分
var sum = 0; //这里一定要定义为0，这样也算声明sum是一个数值的方式，不然直接var sum。会返回NaN，不是一个数值
for(var s = 0; s < myArr.length; s++) {
sum += parseInt(myArr[s][1]);
// alert(myArr.length);
// alert(myArr[s][1]);
}
// alert(sum);
//平均分——等于总分除以班级人数
var pjf = sum / myArr.length;

// document.write(sum);
// document.write(pjf);
//最后单独添加：
myArr.push(['总分', sum], ['平均分', pjf]);

//开始写表格
document.write('<table border="1">');
document.write('<caption>181班期末成绩表</caption>');
document.write('<tr>');
for(var a = 0; a < datearr.length; a++) {
document.write('<td>' + datearr[a] + '</td>');
}
document.write('</tr>');
for(var i = 0; i < myArr.length; i++) { //实现写10行
document.write('<tr>');
for(var j = 0; j < 1; j++) { //每行写一遍
document.write('<td>' + myArr[i][0] + '</td>'); //一遍中的第一个单元格
document.write('<td>' + myArr[i][1] + '</td>'); //一遍中的第二个单元格
if(i < myArr.length-2) {//抛去最后两个不进行判断，因为最后两个是单独添加的总分和平均分。所以只有在i小于长度减去最后两个后的情况下，才能进行判断。
if(myArr[i][1] >= 80) { //判断成绩后写备注
document.write('<td>优秀</td>');
} else if(myArr[i][1] < 80 && myArr[i][1] >= 60) {
document.write('<td>及格</td>');
} else {
document.write('<td>不及格</td>');
}
}

// alert(myArr[j]);
}

document.write('</tr>');
}
document.write('</table>');
// alert(myArr.length);
// alert(myArr[i].length);
</script>
</body>

</html>

JS-纯js制作动态成绩表（流程控制语句+js内置对象）的更多相关文章

  1. JS基础-语法+流程控制语句+函数+内置对象【数组】

    JS语法: Javascript基本数据类型:undefined/null/Boolean/number/string 复杂数据类型:object typeof用来检测变量的数据类型 typeof的使 ...

  2. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  3. JS内置对象的原型不能重定义？只能动态添加属性或方法？

    昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...

  4. 5、前端--js常量、变量、5种基本数据类型（number string boolean undefined object）、运算符、流程控制、三元运算符、函数、自定义对象、内置对象、BOM操作

    变量与常量 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量) 新版本 let(可以声明局部变量) # 推荐使用let(其实问题不大) 在JS中声明常量也需要使用关键字 const # ...

  5. js运算符、 流程控制 、函数、内置对象、BOM与DOM操作

    运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...

  6. JS运算符，流程控制，函数，内置对象，BOM与DOM

    运算符 1.算数运算符 运算符 描述 + 加 - 减 * 乘 / 除 % 取余(保留整数) ++ 递加 - - 递减 ** 幂 var x=10; var res1=x++; '先赋值后自增1' 10 ...

  7. js流程控制；常用内置对象

    一.流程控制 1.if .if-else.if-else if-else var ji = 20; if(ji >= 20){ console.log('大吉大利,晚上吃鸡') } alert( ...

  8. js数组、内置对象、自定义对象

    [js中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合 元素在数组中的顺序,称为下标.可以使用下表访问数字的每个元素. 2.如何声明一个数组? ① 使用字面量声明: 在 ...

  9. js简介 基本操作 以及循环语句 内置对象 函数044

    js 全称 javascript 从交互的角度 描述行为 一 .js注释方法: //单行注释    声明变量 var 二 .声明多个变量 :   var a = '2' ,b = 4, c = tru ...

随机推荐

  1. ArcGIS支持MongoDB数据源

    ArcGIS支持MongoDB数据源 自从NoSQL推出之后,MongoDB就作为比较杰出的代表受到广大用户的推崇,当然,与之而来的大数据的讨论也非常激烈,GIS数据源向来都是以海量来计算,所以,GI ...

  2. [BZOJ2152]聪聪可可（点分治）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2152 分析:裸的点分治,对于每课树,记录t[0],t[1],t[2]表示到当前根节点距 ...

  3. word2vec使用说明（google工具包）

    word2vec使用说明   转自:http://jacoxu.com/?p=1084. Google的word2vec官网:https://code.google.com/p/word2vec/ 下 ...

  4. windows注册表学习笔记

    注册表,想起来了就学学,方便操作.无需把它当成重要学问,今日就学一波,作为了解. 一.注册表清理脚本 主要是删除临时文件,旧文件.并不能够删除无效的键 @echo off del/f/s/q %sys ...

  5. [转]论acm与泡妞

    abstract :本文从各个方面讨论了泡妞与做题之间的相似之处与不同点,尽量的站在一个公平的角度阐述这一问题,所得的研究成果填补了国内外的理论空白. - 泡了一个好妞就好像做了一道难题一样快感都是相 ...

  6. OAuth in One Picture

    近年来,OAuth在各种开放平台的引领下变得非常流行,上图是OAuth协议认证的全过程,图本身已经比较详细,这里不再赘述. 从上图中可以看出,OAuth协议中有三个角色: User, Consumer ...

  7. mysql数据库行级锁的使用（二）

    项目上的另外一个需求是: 在做统计的时候需要将当前表锁定不能更新当前表记录 直接上代码 package com.robert.RedisTest; import java.sql.Connection ...

  8. javac 编译与 JIT 编译

    编译过程 不论是物理机还是虚拟机,大部分的程序代码从开始编译到最终转化成物理机的目标代码或虚拟机能执行的指令集之前,都会按照如下图所示的各个步骤进行: 其中绿色的模块可以选择性实现.很容易看出,上图中 ...

  9. 【HDU 5858】Hard problem

    边长是L的正方形,然后两个半径为L的圆弧和中间半径为L的圆相交.求阴影部分面积. 以中间圆心为原点,对角线为xy轴建立直角坐标系. 然后可以联立方程解出交点. 交点是$(\frac{\sqrt{7} ...

  10. 机器学习Python包

    随着机器学习的逐日升温,各种相关开源包也是层出不群,面对如此多种类的工具包,该如何选择,有的甚至还知之甚少或者不知呢,本文简单汇总了一下当下使用比较多的Python版本机器学习工具包,供大家参看,还很 ...