티스토리 뷰

Web(국비)/자바스크립트

JavaScript - 성적판정 결과 예제

Xion 2019. 10. 17. 16:17 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>
<style type="text/css">

hr.one{   border:none; border:2px dashed orange; width: 400px;}
h1{text-align:center}
   
   input 
   {
      font-family: 나눔고딕코딩;
      font-weight: bold;
      
   }
   input.btn
   {
      width: 80px;
      font-weight: bold;
      font-family: 맑은 고딕;
      
   }
   input.btn:hover
   {
      color: orange;
      
   }
   input.tx
   {
      color : red;
   }
   div{text-align:center};
   
</style>
<script type="text/javascript">

function Result(ojr)
{
   var vKor = parseInt(document.getElementById("kor").value);
   var vEng = parseInt(document.getElementById("eng").value);
   var vMat = parseInt(document.getElementById("mat").value);
   var vResult = 0;
   var vSum = parseInt(vKor+vEng+vMat);
   var vAvg = Math.round(vSum/3);
   
   document.getElementById("tot").value = vSum;
   document.getElementById("avg").value = vAvg;
         
   
   if(vKor>=40 && vEng>=40 && vMat>=40 && vAvg>=60)
      vResult = "합격";
   else if (vAvg>=60)
      vResult = "과락";
   else
      vResult = "불합격";
      
      
   

   
   document.getElementById("result").value = vResult;
}


</script>
</head>
<body >

<!-- 사용자로부터 이름, 국어점수, 영어점수, 수학점수를 입력받아
     평균 점수와 판정 결과를 출력하는 페이지를 구성한다.
     판정결과는 합격, 과락, 불합격 중 하나로 처리된다.
     
     합격은 모든 과목 점수가 40점 이상이면서 평균이 60점 이상인 경우
     과락은 평균이 60점 이상이지만, 한 과목이라도 과목 점수가 40점 미만인 경우
     불합격은 평균이 60점 미만인 경우로 한다. 
     
   HTML, CSS, Javascript 활용
-->
<form>
   <h1 >성적 판정 결과 시스템</h1>
   <hr class ="one">
<div>
이름 : <input type="text" id="name" size="10" maxlength="10" style="width: 60px"><br>
국어 : <input type="text" id="kor" size="3" maxlength="3" style="width: 30px; margin-left:30px"><br>
영어 : <input type="text" id="eng" size="3" maxlength="3" style="width: 30px; margin-left:30px"><br>
수학 : <input type="text" id="mat" size="3" maxlength="3" style="width: 30px; margin-left:30px"><br><br>
   <input type ="button"class = "btn" style="width: 50px" value ="결과" onclick= "Result(this)">
   <input type ="reset" class="btn" id="btnSet" style="width: 50px" value = "취소"><br><br>
합계 : <input type="text" id="tot" size="3" maxlength="3" style="width: 40px; margin-left:20px"><br>
평균 : <input type="text" id="avg" size="3" maxlength="3" style="width: 40px; margin-left:20px"><br>
<br>
판정결과 : <input type="text" class ="tx" id="result" size="10" maxlength="5" style="width: 60px"><br>
</div>
</form>


</body>
</html>










   

성적 판정 결과 시스템


   


이름 : 

국어 : 

영어 : 

수학 : 


   
   


합계 : 

평균 : 



판정결과 : 




 

저작자표시

'Web(국비) > 자바스크립트' 카테고리의 다른 글

JavaScript - 배열 문제  (0) 2019.10.17
JavaScript-문제 1~100까지 textarea에 적기  (0) 2019.10.17
JavaScript - 동전반환 문제  (0) 2019.10.17
JavaScript -this활용 함수  (0) 2019.10.17
JavaScript - getElementById()  (0) 2019.10.17