<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>对象综合练习</title>
<style type="text/css">
body {
font: 14px "微软雅黑";
}

span {
padding: 5px;
}

table {
margin: 0 auto;
border: 3px solid cornflowerblue;

}
tr{
border: 1px solid #4169E1;
}
td#y,#m,#d,#day{
border:none;
}
</style>

</head>

<body>
<table>
<caption style="background-color:cornflowerblue;padding:5px 0;color: white;">x班期末成绩表</caption>
<thead>
<tr>
<td id="y"></td>
<td id="m"></td>
<td id="d"></td>
<td id="day"></td>
</tr>
</thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>备注</td>
</tr>
<tr>
<td>小明</td>
<td>87</td>
</tr>
<tr>
<td>小花</td>
<td>81</td>
</tr>
<tr>
<td>小红</td>
<td>97</td>
</tr>
<tr>
<td>小天</td>
<td>76</td>
</tr>
<tr>
<td>小张</td>
<td>54</td>
<td>不及格</td>
</tr>
<tr>
<td>小小</td>
<td>94</td>
</tr>
<tr>
<td>小西</td>
<td>90</td>
</tr>
<tr>
<td>小舞</td>
<td>66</td>
</tr>
<tr>
<td>小迪</td>
<td>64</td>
</tr>
<tr>
<td>小曼</td>
<td>76</td>
</tr>
<tr>
<td>总分</td>
<td id="sum"></td>
</tr>
<tr>
<td>平均分</td>
<td id="b"></td>
</tr>
</table>
<script type="text/javascript">
var mydate = new Date();
// document.write(mydate);
document.getElementById('y').innerText = mydate.getFullYear() + '年';
var monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
document.getElementById('m').innerText = monthArr[mydate.getMonth()] + '月'; //这里注意，直接导出getMonth的值，会比实际月份少1，这是因为，月份是从1-12，而getMonth返回的值则是从0-11，就和星期的返回方法是一样的。所以解决方法也一样，利用返回的值，当做数组的下标调用，对应出正确的月份。用alert(mydate.getMonth())才发现了这个问题，进而解决掉。所以说alert是调试bug的必备良药。
// alert(mydate.getMonth());
document.getElementById('d').innerText = mydate.getDate() + '日'; //获得日的方法
//星期
var dayArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
document.getElementById('day').innerHTML = dayArr[mydate.getDay()];

//成绩信息
var myArr = [['小明', 87],['小花', 81],['小红', 97],['小天', 76],['小张', 54],['小小', 94],['小西', 90],['小舞', 66],['小迪', 64],['小曼', 76]];
// alert(myArr[0]);
// alert(myArr[0][1]);
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);
</script>

</body>

</html>

JS-结合html综合练习js的对象——班级成绩表制作的更多相关文章

  1. JS-DOM 综合练习-动态添加删除班级成绩表

    费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...

  2. JS核心系列：浅谈原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  3. js将json字符串转化成json对象的方法

    js将json字符串转化成json对象的方法: JSON.parse(jsonObject)

  4. js 的强制 类型 转换cast, 伪对象?

    拼音输入法简单快捷, 但是重码多, 所以要看清了再选择, 不然会影响输入正确性和 心情的! js的类型 隐式 转换? 是指, 根据 表达式的操作符号 如if(), + , && , j ...

  5. js最好的继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  6. js怎样推断一个对象{}是否为空对象，没有不论什么属性

    js怎样推断一个对象{}是否为空对象,没有不论什么属性 前段时间用js写了一个相似"angularjs"用于数据绑定的东西,功能是比較简单了, 通常应该传进来的是一个ArrayLi ...

  7. Thymleaf js直接获取后台传过来的对象或者对象的属性以及map

    简单说明:第一次接触thymleaf模板,对于thymleaf在js中如何获取后台传递过来的值,真的挺简单的,记住就行了 代码: 后台代码: //传递一个org对象给jspublic String t ...

  8. js一种继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  9. Node.js：get/post请求、全局对象、工具模块

    一.GET/POST请求 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交.表单提交到服务器一般都使用 GET/POST 请求. 1.获取GET请求内容 由于GET请求直接被嵌入在路径 ...

随机推荐

  1. python 英文字串首字母改为大写

    #英文字串首字母改为大写 st = "string" St = st[0].upper() + st[1:] 2016-10-22 后来了解到 python 内部有相关实现,感觉  ...

  2. android 布局之scrollview

    今天在布局页面的时候后犯了难,我要显示的内容一个页面展示不完,怎么办呢? 于是随便找了个app点开一看,哎呀原来还能翻动啊!这是啥布局呢?原来是ScrollView 官方api相关的内容全是英文,这可 ...

  3. ASP.NET 使用Ajax

    转载: http://www.cnblogs.com/dolphinX/p/3242408.html $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语 ...

  4. Linux 下以其他用户身份运行程序—— su、sudo、runuser

      本文综合分析了Linux系统下,如何使用runuser命令.su命令和sudo命令以其他用户身份来运行程序,以及这三个命令的运行效率比较. 一.su 命令临时切换用户身份 SU:( Switch ...

  5. 网络设计中需要考虑的时延latency差异

    Jeff Dean提到不同数据访问方式latency差异 Numbers Everyone Should Know L1 cache reference 0.5 ns Branch mispredic ...

  6. 设计模式之UML类图的常见关系

    设计模式之UML类图的常见关系 本文来自转载 烧点饭博客 本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association), ...

  7. Spring Assert 断言

    Assert(断言)的初步理解构思 Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查, ...

  8. Linux下eclipse提示快捷键失效解决办法

    在window->Preferences->general->keys中, 找到 content asist 修改下边值 Binding 改成 Alt+/ When 改为 Editi ...

  9. js-JavaScript高级程序设计学习笔记11

    依然第十四章 1.选择部分文本:使用setSelectionRange()方法,两个参数为第一个字符的索引和最后一个字符之后的索引,类似于substring()方法. 2.IE8及更早版本使用范围选择 ...

  10. 【BZOJ-1090】字符串折叠 区间DP + Hash

    1090: [SCOI2003]字符串折叠 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1127  Solved: 737[Submit][Stat ...