JS-结合html综合练习js的对象——班级成绩表制作

简介: 对象综合练习 body { font: 14px "微软雅黑"; } span { padding: 5px; } table { margin: 0 auto; border: 3px solid cornflowerblue; }...

<!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>

目录
相关文章
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
24天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
9天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
9天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4