<!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. HTTP请求头参数

      Accept-Language: zh-cn,zh;q=0.5 意思:浏览器支持的语言分别是中文和简体中文,优先支持简体中文. 详解: Accept-Language表示浏览器所支持的语言类型: ...

  2. java代码注释规范

    java代码注释规范   代码注释是架起程序设计者与程序阅读者之间的通信桥梁,最大限度的提高团队开发合作效率.也是程序代码可维护性的重要环节之一.所以我们不是为写注释而写注释.下面说一下我们在诉求网二 ...

  3. 东大OJ-5到100000000之间的回文质数

    1217: VIJOS-P1042 时间限制: 0 Sec  内存限制: 128 MB 提交: 78  解决: 29 [提交][状态][讨论版] 题目描述         有一天,雄霸传授本人风神腿法 ...

  4. PHP mail()函数

    <?php /* PHP mail()函数 参数 描述 to 必需.规定 email 接收者. subject 必需.规定 email 的主题.注释:该参数不能包含任何新行字符. message ...

  5. python基础_字典_列表_元组考试_day4

    1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串,li=['alex','eric','rain'] li=['alex','eric','rain'] v="_".jo ...

  6. C# Label显示多行文本及换行(WinForm/WebForm)

    转载: http://www.cnblogs.com/greatverve/archive/2011/10/20/label-multi.html WinForm 很多朋友都会在开发WinForm中遇 ...

  7. 1118ALTER TABLE tabname DISCARD TABLESPACE快速导入数据利用表空间

    -- 快速导入数据如果你有.ibd文件的一个干净的备份,你可以按如下操作从被起源的地方恢复它到MySQL安装中:相当快速 1. 发出这个ALTER TABLE语句: 2. ALTER TABLE tb ...

  8. 1103简单SQL 行转列思路

    转自http://www.cnblogs.com/lhj588/p/3315876.html -- 经典行列转化DROP TABLE IF EXISTS TabName;CREATE TABLE Ta ...

  9. 选项卡js

    趁着公司不忙,抓紧充充电,开始可能会写的不好,但是每写一个都是一点进步,哈哈,加油 用js实现选项卡切换 1.获取元素 2.初始状态 3.通过循环清空元素状态 4.点击操作以及对应的内容切换 5.自定 ...

  10. 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...