案例：優秀學生
随機數：假設由=有十個科目，每個滿分是120
要求：每次點選按鈕，出現的結果都不相同，并且排名與優秀學生顯示準确
表格邊框，字型顔色自行設定
輸出結果：
代碼：
<title></title>
<style type="text/css">
table{
font-size: 2em;
}
</style>
</head>
<body>
<button type="button" onclick="inpt()">點選擷取情報</button>
<table border="8">
<th colspan="4">案例：優秀學生</th>
<tr>
<td>姓名</td>
<td>總分</td>
<td>平均分</td>
<td>排名</td>
</tr>
<tr id="tr1">
<td>小明</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr2">
<td>小紅</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr3">
<td>小王</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr4"></tr>
</table>
</body>
<script type="text/javascript">
function inpt(){
oneClass=[];
twoClass=[];
threeClass=[];
//求随機數
function sjs(){
var x=Math.random();
x=x*120;
x=Math.floor(x);
return x;
}
for(var i=0;i<=10;i++){
oneClass[i]=sjs();
twoClass[i]=sjs();
threeClass[i]=sjs();
}
function Arr(m,n){
return m+n;
}
//求平均數
oneClassAvg=oneClass.reduce(Arr)/10;
twoClassAvg=twoClass.reduce(Arr)/10;
threeClassAvg=threeClass.reduce(Arr)/10;
//alert(oneClassAvg);
//求最大值
var sumClassAvg=[];
sumClassAvg.unshift(oneClassAvg,twoClassAvg,threeClassAvg);
sumClassAvg.sort(function(m,n){
return n-m;
});
//方法一
/* var one,two,three;
if(oneClassAvg==sumClassAvg[0]){
one="第一"
}else if(oneClassAvg==sumClassAvg[1]){
one="第二"
}else{
one="第三"
}
if(twoClassAvg==sumClassAvg[0]){
two="第一"
}else if(twoClassAvg==sumClassAvg[1]){
two="第二"
}else{
two="第三"
}
if(threeClassAvg==sumClassAvg[0]){
three="第一"
}else if(threeClassAvg==sumClassAvg[1]){
three="第二"
}else{
three="第三"
} */
//方法二
var one,two,three;
function paixu(a){
if(a==sumClassAvg[0]){
return "第一"
}else if(a==sumClassAvg[1]){
return "第二"
}else return "第三";
}
one=paixu(oneClassAvg);
two=paixu(twoClassAvg);
three=paixu(threeClassAvg);
//alert(sumClassAvg);
sumClassAvg.unshift(oneClassAvg,twoClassAvg,threeClassAvg);
var maxIndex=0;
for(var i=1;i<sumClassAvg.length;i++){
if(sumClassAvg[i]>sumClassAvg[maxIndex]){
maxIndex=i;
}
}
var maxClass="";
var maxavg=0;
//找出最大值班級
if(maxIndex==0){
maxavg=sumClassAvg[maxIndex];
maxClass="小明"
}
if(maxIndex==1){
maxavg=sumClassAvg[maxIndex];
maxClass="小紅"
}
if(maxIndex==2){
maxavg=sumClassAvg[maxIndex];
maxClass="小王"
}
var tr1=document.getElementById("tr1");
var tr2=document.getElementById("tr2");
var tr3=document.getElementById("tr3");
var tr4=document.getElementById("tr4");
tr1.innerHTML="<td>小明</td>"+"<td>"+oneClass.reduce(Arr)+"</td>"+"<td>"+oneClassAvg+"</td>"+"<td>"+one+"</td>";
tr2.innerHTML="<td>小紅</td>"+"<td>"+twoClass.reduce(Arr)+"</td>"+"<td>"+twoClassAvg+"</td>"+"<td>"+two+"</td>";
tr3.innerHTML="<td>小王</td>"+"<td>"+threeClass.reduce(Arr)+"</td>"+"<td>"+threeClassAvg+"</td>"+"<td>"+three+"</td>";
tr4.innerHTML="<td colspan='4'>"+maxClass+"最好的成績,"+"平均數為"+maxavg+"</td>";
}
</script>