专栏首页前端说吧JS-纯js制作动态成绩表(流程控制语句+js内置对象)

JS-纯js制作动态成绩表(流程控制语句+js内置对象)

流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>综合运用</title>
		<style type="text/css">
			body {
				text-align: center;
				font: 14px "微软雅黑";
			}
 
			td {
				padding: 8px 10px;
			}
 
			table {
				display: inline-block;
				border: 5px solid #6495ED;
			}
 
			caption {
				background-color: #6495ED;
				color: white;
				padding: 10px 5px;
			}
		</style>
	</head>
	<body>
		<h1>流程控制for循环+if判断+Math对象+Array对象+Date对象制作成绩表</h1> //monthArr[mydate.getMonth()] + '月'; 这里注意,直接导出getMonth的值,会比实际月份少1,这是因为,月份是从1-12,而getMonth返回的值则是从0-11,就和星期的返回方法是一样的。所以解决方法也一样,利用返回的值,当做数组的下标调用,对应出正确的月份。用alert(mydate.getMonth())才发现了这个问题,进而解决掉。所以说alert是调试bug的必备良药。
		<!--	
			求和公式
			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);
			其他不成熟也不成功的小实验
//			document.getElementById('b').innerText = Math.round(Math.sqrt(sum));//四舍五入(算术平方根(sum和的值))//document.write(Math.pow(Math.sqrt(sum),2));-->
		<h1>法2——for循环制作表格</h1>
		<script type="text/javascript">
		//成绩信息
			var myArr = [
				['小明', 87],
				['小花', 81],
				['小红', 97],
				['小天', 76],
				['小张', 54],
				['小小', 94],
				['小西', 90],
				['小舞', 66],
				['小迪', 64],
				['小曼', 76]
			];
		//月份
			var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
		//星期
			var day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			var mydate = new Date(); //var year = mydate.getFullYear();
		//日期
			var datearr = [mydate.getFullYear() + '年', month[mydate.getMonth()] + '月', mydate.getDate() + '日', day[mydate.getDay()]];
		//总分
			var sum = 0; //这里一定要定义为0,这样也算声明sum是一个数值的方式,不然直接var sum。会返回NaN,不是一个数值
			for(var s = 0; s < myArr.length; s++) {
				sum += parseInt(myArr[s][1]);
				//			alert(myArr.length);
				//			alert(myArr[s][1]);
			}
			//		alert(sum);
		//平均分——等于总分除以班级人数
			var pjf = sum / myArr.length;
 
//			document.write(sum);
//			document.write(pjf);
		//最后单独添加:
			myArr.push(['总分', sum], ['平均分', pjf]);
		//开始写表格
			document.write('<table border="1">');
			document.write('<caption>181班期末成绩表</caption>');
			document.write('<tr>');
			for(var a = 0; a < datearr.length; a++) {
				document.write('<td>' + datearr[a] + '</td>');
			}
			document.write('</tr>');
			for(var i = 0; i < myArr.length; i++) { //实现写10行
				document.write('<tr>');
				for(var j = 0; j < 1; j++) { //每行写一遍
					document.write('<td>' + myArr[i][0] + '</td>'); //一遍中的第一个单元格
					document.write('<td>' + myArr[i][1] + '</td>'); //一遍中的第二个单元格
					if(i < myArr.length-2) {//抛去最后两个不进行判断,因为最后两个是单独添加的总分和平均分。所以只有在i小于长度减去最后两个后的情况下,才能进行判断。
						if(myArr[i][1] >= 80) { //判断成绩后写备注
							document.write('<td>优秀</td>');
						} else if(myArr[i][1] < 80 && myArr[i][1] >= 60) {
							document.write('<td>及格</td>');
						} else {
							document.write('<td>不及格</td>');
						}
					}
					//					alert(myArr[j]);
				}
				document.write('</tr>');
			}
			document.write('</table>');
			//			alert(myArr.length);
			//			alert(myArr[i].length);
		</script>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ISUX Xcube智能一键生成H5

    腾讯ISUX
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 知识体系解决迷茫的你

    最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

    桃翁
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 不只是软件,在线也可以免费下载百度文库了。

    不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

    课代表
  • 理工男图解零维到十维空间,烧脑已过度,受不了啦!

    让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

    钱塘数据
  • 【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

    腾讯高校合作
  • 中国互联网协会发布:《2018中国互联网发展报告》

    在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

    钱塘数据
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 考研英语-1-导学

    英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

    用户1335799

扫码关注云+社区

领取腾讯云代金券