JS-结合html综合练习js的对象——班级成绩表制作
<!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的对象——班级成绩表制作的更多相关文章
- JS-DOM 综合练习-动态添加删除班级成绩表
费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...
- JS核心系列：浅谈原型对象和原型链
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...
- js将json字符串转化成json对象的方法
js将json字符串转化成json对象的方法: JSON.parse(jsonObject)
- js 的强制 类型 转换cast, 伪对象?
拼音输入法简单快捷, 但是重码多, 所以要看清了再选择, 不然会影响输入正确性和 心情的! js的类型 隐式 转换? 是指, 根据 表达式的操作符号 如if(), + , && , j ...
- js最好的继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js怎样推断一个对象{}是否为空对象，没有不论什么属性
js怎样推断一个对象{}是否为空对象,没有不论什么属性 前段时间用js写了一个相似"angularjs"用于数据绑定的东西,功能是比較简单了, 通常应该传进来的是一个ArrayLi ...
- Thymleaf js直接获取后台传过来的对象或者对象的属性以及map
简单说明:第一次接触thymleaf模板,对于thymleaf在js中如何获取后台传递过来的值,真的挺简单的,记住就行了 代码: 后台代码: //传递一个org对象给jspublic String t ...
- js一种继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。
js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...
- Node.js：get/post请求、全局对象、工具模块
一.GET/POST请求 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交.表单提交到服务器一般都使用 GET/POST 请求. 1.获取GET请求内容 由于GET请求直接被嵌入在路径 ...
随机推荐
- [Codevs 1421]秋静叶&秋穣子(最大-最小博弈）
题目:http://codevs.cn/problem/1421/ 分析:有向树上的最大-最小博弈 先手与后手的策略不同: 先手A:让对方取得尽量少的前提下,自己取得尽量大 后手B:让自己取得尽量多的 ...
- hiho一下 第六十四周 Right-click Context Menu
题目链接:hihocoder 第64周 题意概述: 上下文菜单是panel(面板)包括很多section(分区),一个分区里面至少包含一个菜单项.每一个菜单项都对应有一个子panel,这个panel可 ...
- python 2.7 简单模拟登陆网站
举个栗子,首先创建网络会话, 然后就可以用创建的session来访问网页了. session.get(URL) #-*- coding:utf-8 -*- import requests import ...
- 【JQuery】jQuery.inArray 确定第一个参数在数组中的位置
函数:jQuery.inArray(value,array,[fromIndex]) 解释: value:用于在数组中查找是否存在 array:待处理数组. ...
- C++ vector用法
在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. 1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<in ...
- Android复习笔记--架构与版本
#Android架构: 1. Linux 内核层 Android 系统是基于Linux 2.6 内核的,这一层为Android 设备的各种硬件提供了底 层的驱动,如显示驱动.音频驱动.照相机驱动.蓝牙 ...
- URL（待整合到HTTP书中哦）
一:scheme://host.domain:port/path/filename scheme - 定义因特网服务的类型.最常见的类型是 http host - 定义域主机(http 的默认主机是 ...
- session超时设置
session的设置方法有三种: 1.直接在应用服务器中设置 如果是Tomcat,可以在Tomcat目录下conf/web.xml中找到<session-config>元素,tomcat默 ...
- MySQL多实例
http://www.kancloud.cn/digest/mysqlsummary/132842http://crazy123.blog.51cto.com/1029610/1611887/ htt ...
- nginx.conf的events，http段一般固定配置
nginx.conf的events,http段一般固定配置 user nobody nobody; #使用的用户可以按照实际情况修改 worker_processes ; #指定nginx开启的进程数 ...