* 티스토리에서 wav파일 접근 경로를 파악하지 못하여 알람은 울리지 않습니다. ㅠㅠ
라면 타이머 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" name="frm">
<div align="left">
<strong>라면 타이머</strong>
<br><br>
<!-- id와 name 같은이름 사용가능 -->
<select id="selid" name="selid">
<option value="180">시간 선택(기본:3분)</option>
<option value="300">5분</option>
<option value="180">3분</option>
<option value="120">2분</option>
<option value="60">1분</option>
<option value="30">30초</option>
</select>
<input type="button" value="Timer Start" onclick="noodle()">
<br><br>
<!-- CSS 묶을 때 많이 사용한다 -->
<span id="countdown">time selected</span>
<br><br>
<button type="button" onclick="window.close()">close</button>
</div>
</form>
<script type="text/javascript">
let index = 0; // 다른 함수에서도 사용하기 위해
let value = 0;
let time = 0;
function noodle() {
clearInterval(time); // timer 초기화
index = document.frm.selid.selectedIndex; // index 번호를 가져온다.
value = parseInt(document.frm.selid.options[index].value);
time = setInterval('noodleTimer()', 1000); // 1초마다 noodleTimer()함수 호출
}
function noodleTimer() {
value = value - 1; // 1씩 빼나가도록 한다.
// 1초마다 실행
document.getElementById('countdown').innerHTML = "완료까지 <b>" + value + "</b>초 남았습니다";
if(value == 0){
clearInterval(time);
let audio = new Audio('AlarmClockBell.wav');
audio.play();
}
}
</script>
</body>
</html>
함수 설명
clearInterval() : 매개변수로 변수명과 함수명을 받으며 사용 시 매개변수가 종료됩니다.(초기화)
setInterval('함수명', 시간 간격) : 일정한 시간간격으로 값을 갱신해 줍니다.
window.close() : 현재 실행창이 닫힙니다.
option value 접근 예시
// id로 직접 접근해서 가져오는 방법
let value = document.getElementById("selid").value;
// name으로 접근해서 가져오는 방법
value = document.frm.selid.value;
// 네임 안에 option들을 가져온다(배열 = index로 되어 있음)
// parseInt 시간이 흘러가도록 숫자로 변경하여야 한다.
value = parseInt(document.frm.selid.options[index].value);
'IT > JavaScript' 카테고리의 다른 글
| [Html+JavaScript] onblur / onchange 이벤트 (0) | 2021.06.07 |
|---|---|
| [Html+JavaScript]a href vs form action vs location.href 사용법 (feat.jsp) (0) | 2021.06.07 |
| [Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0) | 2021.06.07 |
| [Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form (0) | 2021.06.07 |
| [Html+JavaScript] 계산기(feat.Dom) (0) | 2021.06.06 |