用HTML制作一个漂亮的成绩表,JS-结合html综合练习js的对象——班级成绩表制作...
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;
}
| 姓名 | 成績 | 備注 |
| 小明 | 87 | |
| 小花 | 81 | |
| 小紅 | 97 | |
| 小天 | 76 | |
| 小張 | 54 | 不及格 |
| 小小 | 94 | |
| 小西 | 90 | |
| 小舞 | 66 | |
| 小迪 | 64 | |
| 小曼 | 76 | |
| 總分 | ||
| 平均分 |
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
sum += myArr[i][1];
//alert(myArr[i][1]);
//document.write(myArr[i][0]+‘
‘);
}
//document.write(sum);
document.getElementById(‘sum‘).innerText = sum;
var pjf = sum/myArr.length;
document.getElementById(‘b‘).innerHTML = Math.round(pjf);
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的用HTML制作一个漂亮的成绩表,JS-结合html综合练习js的对象——班级成绩表制作...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html鼠标点击切换图片,js鼠标点击图
- 下一篇: 计算机科学导论 第4版,计算机科学导论.