首頁 > 開發者 > 網站開發

JS-結合html綜合練習js的對象——班級成績表製作

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

<!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的對象——班級成績表製作

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More