1. 시간선택
2. strat버튼 클릭
3. 남은시간 확인
4. 시간이 다 되면 alert뜸
5. close누르면 창 닫힘
방법1. id로 취득
<body>
<form action="" name="frm">
<div align="center">
<strong>라면 타이머</strong>
<br><br>
<select id="seild" name="myChoice">
<option value="180">원하는 시간을 선택해 주세요 (기본시간 3분)</option>
<option value="300">5분</option>
<option value="180">3분</option>
<option value="150">2분 30초</option>
<option value="120">2분</option>
<option value="60">1분</option>
<option value="30">30초</option>
</select>
<input type="button" value="Strat" onclick="noodle()">
<br><br>
<span id="countdown">time selected</span>
<br><br>
<button type="button" onclick="window.close()">close</button>
</div>
<script type="text/javascript">
let count = 0;
let time = 0;
let choice = 0;
function noodle() {
clearInterval(time); //timer를 initialize
// 선택한 시간 취득1 -> id.value
let value = document.getElementById('seild').value; //option은 value
alert(value);
count = value;
time = setInterval('myTimer()', 1000);
}
function myTimer() {
count = count -1;
document.getElementById('countdown').innerHTML
= "완료까지<b>" +count+ "</b>초 남았습니다";
if (count == 0) {
clearInterval(time); //instance얻어옴
alert("시간이 완료 되었습니다~"); //알람 음악이 나오게 할 수 있음
}
}
</script>
</form>
</body>
방법2. form-> select-> options[choice].valueform 호출
<body>
<form action="" name="frm">
<div align="center">
<strong>라면 타이머</strong>
<br><br>
<select id="seild" name="myChoice">
<option value="180">원하는 시간을 선택해 주세요 (기본시간 3분)</option>
<option value="300">5분</option>
<option value="180">3분</option>
<option value="150">2분 30초</option>
<option value="120">2분</option>
<option value="60">1분</option>
<option value="30">30초</option>
</select>
<input type="button" value="Strat" onclick="noodle()">
<br><br>
<span id="countdown">time selected</span>
<br><br>
<button type="button" onclick="window.close()">close</button>
</div>
<script type="text/javascript">
let count = 0;
let time = 0;
let choice = 0;
function noodle() {
clearInterval(time); //timer를 initialize
// 선택한 시간 취득2 -> form-> select-> options[choice].value
choice = document.frm.myChoice.selectedIndex; //0~n-1
count = parseInt(document.frm.myChoice.options[choice].value); //select안의 options로 접근
time = setInterval('myTimer()', 1000);
}
function myTimer() {
count = count -1;
document.getElementById('countdown').innerHTML
= "완료까지<b>" +count+ "</b>초 남았습니다";
if (count == 0) {
clearInterval(time); //instance얻어옴
alert("시간이 완료 되었습니다~"); //알람 음악이 나오게 할 수 있음
}
}
</script>
</form>
</body>
'Java Script > work' 카테고리의 다른 글
| 한라산 맞추기 (0) | 2020.07.09 |
|---|---|
| 변수의 연산 (0) | 2020.07.09 |
| 체육관 이용 요금. form으로 묶기 (0) | 2020.07.09 |
| 버튼 눌러 현재 시간 출력하기(타이머ver), 시간 set/get (0) | 2020.07.08 |
| 입력창에 입력받아 화면에 출력 (0) | 2020.07.08 |
