學生成績表（輸入成績後自動算出最高、最低、平均分）
阿新 • • 發佈：2019-01-25
col 成績表 function val var () 生成 max text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>千峰H5成績計算表</h3>
<table>
<tr>
<td>班級名稱：</td>
<td><input type="text" id="bname" /></td>
<td></td>
</tr>
<tr>
<td>請輸入班級人數：</td>
<td><input type="text" id="num" /></td>
<td></td>
</tr>
<tr>
<td>班級總成績：</td>
<td><input type="text" id="sum" /></td>
<td><input type="button" value="提交" id="btn" /></td>
</tr>
<tr>
<td>最高成績：</td>
<td><input type="text" id="max" /></td>
<td></td>
</tr>
<tr>
<td>最低成績：</td>
<td><input type="text" id="min" /></td>
<td></td>
</tr><tr>
<td>平均成績：</td>
<td><input type="text" id="avg" /></td>
<td></td>
</tr>
<tr>
<td>成績高低排序：</td>
<td><textarea name="" id="sortScore" cols="30" rows="10"></textarea></td>
<td></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
//定義一個函數 功能 通過id獲取頁面元素
function $(id){
return document.getElementById(id);
}
$("btn").onclick = function(){
if( isNaN( $("bname").value ) ){
alert("班級號為數字");
return;
}
if( isNaN( $("num").value ) ){
alert("班級人數為數字");
return;
}
var bNum = parseInt( $("num").value );
var arr = new Array( bNum );
var sum = 0;
for( var i = 0 ; i < arr.length ; i++ ){
arr[i] =parseInt( prompt("第"+(i+1)+"個人數的分數是") ) ;
sum += arr[i];
}
//得到平均數
var avg = sum / bNum;
//冒泡排序
for( var i = 0 ; i < arr.length - 1 ; i++ ){
for( var j = 0 ; j < arr.length - 1 - i ; j++ ){
if( arr[j] < arr[j+1] ){ //升序
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
$("sum").value = sum;
$("avg").value = avg;
$("max").value = arr[0];
$("min").value = arr[arr.length-1];
$("sortScore").value = arr;
}
</script>
學生成績表（輸入成績後自動算出最高、最低、平均分）