자바 스크립트 기초 문제/풀이 - 라면타이머 📝2️⃣

728x90

코드 ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="" name="frm">
	<div align="center">
	<strong>라면 타이머</strong>
	<br><br>
	
	<select id="selid" name="myChoice" onchange="">
		<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="Timer Start" onclick="noodle()">
	<br><br>
	
	<span id="countdown">time selected</span>
	<br><br>
	
	<button type="button" onclick="window.close()">close</button> <!-- 나가기 -->
	
	
	</div>
</form>


	<script type="text/javascript">
	
	let audio = new Audio('AlarmClockBell.wav');
	
	
	let count = 0;
	let time = 0;
	let choice = 0;
	
	function noodle(){
		
		audio.play();
	
	clearInterval(time); // 타이머가 초기화되는 코드

	/*
	let value = document.getElementById("selid").value;  //(방법1) 밸류값 갖고오는 코드
	count = value;
	alert(value);
	*/
	///////////////////////////////////////////////
	
	choice = document.frm.myChoice.selectedIndex;       //(방법2) 번지수 갖고오는 코드
	//alert(choice);
	
	count = parseInt(document.frm.myChoice.options[choice].value); //[]는 choice로 선택되어진 value값
	//alert(count);
	
	time = setInterval('myTimer()', 1000);
}
	
	function myTimer(){
		count = count - 1;
		
		document.getElementById("countdown").innerHTML = "완료까지 <b>"+count+"</b>초 남았습니다."
		
		if(count == 0){
			clearInterval(time);
			alert("시간이 완료되었습니다.");
			
			let audio = new Audio('AlarmClockBell.wav');
			audio.play();
		}
	}
	
	</script>

</body>
</html>

-> 오디오 파일(wav.)

시간이 다되었을때 알려주는 알람벨 파일

AlarmClockBell.wav

0.68MB

저작자표시

'🚀 자바 스크립트 JavaScript' 카테고리의 다른 글

1️⃣1️⃣ 자바스크립트 - 이름 , 나이값 넘기는 3가지 방법 (0)	2021.03.03
🔟 자바 스크립트 - 화면 전환 (앞페이지, 뒷페이지, 새로고침) (0)	2021.03.03
9️⃣ 자바 스크립트 - CSS를 적용시키는 버튼함수 (0)	2021.03.03
8️⃣ 자바 스크립트 - Id, class, name 차이와 접근 방법 (0)	2021.03.03
7️⃣ 자바 스크립트 - > 10진수를 2진수 8진수 16진수로 변환 (0)	2021.03.03

👨‍💻 코딩 도서관

자바 스크립트 기초 문제/풀이 - 라면타이머 📝2️⃣

'🚀 자바 스크립트 JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

자바 스크립트 기초 문제/풀이 - 라면타이머 📝2️⃣

'🚀 자바 스크립트 JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바