<!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. IT人员如何保护视力

    最近感觉眼比较难受,有点干,估计是因为用上老婆淘汰的iPhone5C后屏幕太小,而我又是一个手机瘾重点患者的原因.为了保持自己5.0+的视力,做了以下工作,分享给各位朋友: Win7电脑将字体放大到1 ...

  2. js前端的各种面试题

    转载:http://bbs.blueidea.com/thread-3107428-1-1.html 1.截取字符串abcdefg的efg //alert('abcdefg'.substring(4) ...

  3. MVC认知路【点点滴滴支离破碎】【五】----form表单上传单个文件

    //个人理解:前台一个form加input[type='file'],在加一个submit的按钮 主要设置form的action,method,enctype='multipart/form-data ...

  4. 通过Gearman实现MySQL到Redis的数据同步

    对于变化频率非常快的数据来说,如果还选择传统的静态缓存方式(Memocached.File System等)展示数据,可能在缓存的存取上会有很大的开销,并不能很好的满足需要,而Redis这样基于内存的 ...

  5. java虚拟机和Dalvik虚拟机的区别

    java虚拟机和Dalvik虚拟机的区别: java虚拟机Dalvik虚拟机 java虚拟机基于栈. 基于栈的机器必须使用指令来载入和操作栈上数据,所需指令更多更多dalvik虚拟机是基于寄存器的 j ...

  6. 安装myeclipse10后破解时发现没有common文件夹

    今天重新安装了myeclipse10软件,然后在破解的时候发现安装目录下没有common,这是因为以前安装过myeclipse,卸载时没有完全清除,再次安装时,myeclipse会自动找到以前安装的c ...

  7. oracle数据泵实现不同用户之间的导出导入

    来源于:http://www.cnblogs.com/kevinsun/archive/2007/02/03/638803.aspx http://blog.sina.com.cn/s/blog_68 ...

  8. [转]java反射机制

    原文地址:http://www.cnblogs.com/jqyp/archive/2012/03/29/2423112.html 一.什么是反射机制         简单的来说,反射机制指的是程序在运 ...

  9. Java Decompiler 反编译工具下载地址及JD-Eclipse设置菜单翻译

    官网地址:http://jd.benow.ca/ JD-GUI:jd-gui-0.3.6.windows.zip JD-Eclipse:jd-eclipse-site-1.0.0-RC2.zip 菜单 ...

  10. <UL>中<li>标签前编号图片的简单调用

    <style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http:// ...