<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 300px;
border-collapse: collapse;
}
td,th {
border: 1px solid #191970;
}
</style>
<script type="text/javascript">
window.onload=function(){
//미리 찾아도 되고 나중에 찾아도 됨
var r=document.getElementById("result"); /* 출력용 div*/
var pro=document.getElementById("pro"); //프로그래스바 id
//결과확인버튼이벤트..나중에 찾는 걸로 해보기
document.getElementById("btnresult").onclick=function(){
//이름 읽기
var name=document.getElementById("name").value;
if(name.length==0)
{
alert("이름을 입력해주세요");
return;
}
//자바점수 읽기..누적으로
var java=document.getElementById("java").value;
if(java.length==0)
{
alert("자바점수를 입력해 주세요");
return;
}
//문자입력시 경고후 종료..문자가 있을 경우 true값 반환
if(isNaN(java))
{
alert("숫자로만 입력 가능");
return;
}
//html점수 읽기
var html=document.getElementById("html").value;
if(html.length==0)
{
alert("HTML점수를 입력해 주세요");
return;
}
//문자입력시 경고후 종료
if(isNaN(html))
{
alert("숫자로만 입력 가능");
return;
}
//점수의 합계,평균
var sum=eval(java+"+"+html); //eval 문자형태의 수식 계산
var avg=sum/2;
//운전면허 체크박스
var chkdrive=document.getElementById("drive");
//document.getElementById("drive").value; 이렇게 하면 선택상관없이 value값이 출력됨(value 없을 경우 on출력)
console.log(chkdrive.checked); //check값 속성 확인
//결과창
var s="[결과확인]<br>";
s+="이름: "+name+"<br>";
s+="JAVA: "+java+"<br>";
s+="HTML: "+html+"<br>";
s+="총점: "+sum+"<br>";
s+="평균: "+avg+"<br>";
s+="운전면허: "+(chkdrive.checked?"보유":"미보유")+"<br>";
s+="나의 인기도: "+pro.value;
//출력
r.innerHTML=s;
}
//인기도 버튼 이벤트
var proland=document.getElementById("proland");
document.getElementById("btnprogress").onclick=function(){
//30~100사이의 난수값
var rnd=parseInt(Math.random()*71)+30;
//한번에 출력
/* pro.value=rnd;
proland.innerHTML=rnd; */
//시간 interval을 두고 출력
var n=0;
proland.innerHTML=""; //초기값
var inter=setInterval(function() {
n++;
pro.value=n;
if(n==rnd)
{
proland.innerHTML=rnd; //span태그에 출력
clearInterval(inter); //현재 타이머 종료
}
}, 10); //100이 0.1초.. 숫자가 작을수록 빨라짐
}
}
</script>
</head>
<body>
<table>
<caption><b>폼태그 Number&setInterval 테스트</b></caption>
<tr>
<th width="100" bgcolor="#add8e6">이름</th>
<td><input type="text" id="name" size="6"></td>
</tr>
<tr>
<th width="100" bgcolor="#add8e6">JAVA점수</th>
<td><input type="text" id="java" size="6"></td>
</tr>
<tr>
<th width="100" bgcolor="#add8e6">HTML점수</th>
<td><input type="text" id="html" size="6"></td>
</tr>
<tr>
<th width="100" bgcolor="#add8e6">운전면허</th>
<td><input type="checkbox" id="drive" size="6" value="yes">보유</td>
</tr>
<tr>
<th width="100" bgcolor="#add8e6">나의 인기도</th>
<td>
<progress id="pro" max="100" value="0"></progress>
<br>
<button type="button" id="btnprogress">측정</button>
<span id="proland">0</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id="btnresult">결과확인</button>
</td>
</tr>
<tr height="100">
<td colspan="2" align="center">
<div id="result"></div>
</td>
</tr>
</table>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210929_canvas (0) | 2021.09.29 |
|---|---|
| 210929_calendar (0) | 2021.09.29 |
| 210928_image,onkeyup(위치변경) (0) | 2021.09.28 |
| 210928_time,setInterval,setTimeout,image (0) | 2021.09.28 |
| 210928_setInterval,setTimeout,clearInterval,keyCode (0) | 2021.09.28 |