Daily coding
JavaScript : setInterval() 이용하여 타이머 만들기 본문
setInterval : 일정한 간격으로 특정 함수를 호출하는 함수
setInterval("함수명", 초); ---> 초단위는 1/1000초 단위로, 1000을 입력하면 1초 간격으로 함수가 갱신된다.
- 변수를 하나 선언하여 interval의 값을 저장하고
초기화 및 타이머 종료가 가능하도록 한다.
ex > var time = setInterval ( "func()", 1000 ); ---> func() 함수를 1초간격으로 갱신해준다
* interval을 설정하기 전에, 변수를 초기화 시켜주도록한다 (이전 타이머 값을 초기화)
ex > clearInterval ( time ); ---> time에 들어있는 interval값을 초기화시킨다 ( =종료시킴)
* 특정 횟수만큼 반복 시키기 위해서 count 변수를 설정한다.
ex >
var count =100; // 100회 반복
var time = 0;
function start(){
clearInterval (time);
time = setInterval("func()", 1000); --> 1초 간격으로 갱신
}
function func(){
count = count +1;
if( count != 0) { // 카운트 진행중
(진행할 로직)
}
else if ( count == 0 ) {
clearInterval(time); ---> 카운트를 끝냄
}
}
*** name으로 인덱스 찾기
// name으로 index 찾기 ( frm은 form의 name)
choice = document.frm.myChoice.selectedIndex;
// 찾은 index로 value찾기
count = parseInt(document.frm.myChoice.options[choice].value);
** 우클릭 금지시키는 함수
document.oncontextmenu = function() {
alert("마우스의 우클릭은 사용할 수 없습니다.")
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
form의 name의 목적 : 자바스크립트에서 접근이 용이하게 하기 위해서 사용
-->
<form action="" name="frm">
<div align="center">
<strong>Ramen Timer</strong><br><br>
<select id="selid" 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="GO!" onclick="noodle()">
<br><br>
<span id="countdown">time selected</span>
<br><br>
<input type="button" value="Close" onclick='window.close()'>
</div>
</form>
<script type="text/javascript">
var count = 0;
var time = 0;
var choice = 0;
function noodle() {
clearInterval(time); // 타이머 우선 초기화 시켜주기(time initialize)
/*
ID로 가져오기
// select의 value를 가져오기 : value
var val = document.getElementById("selid").value;
alert(val); // 확인용
// select의 index값을 가져오기 : selectedIndex
var indexNum = document.getElementById("selid").selectedIndex;
alert(indexNum); // 확인용
*/
// name으로 index 찾기
choice = document.frm.myChoice.selectedIndex;
// alert(choice);
// 찾은 index로 value찾기
count = parseInt(document.frm.myChoice.options[choice].value);
// alert(count);
// 타이머 함수 1초씩 호출하는 함수 만들기
time = setInterval("myTimer()",1000);
}
function myTimer() {
count = count - 1; // 타이머 선택 숫자에서 -1씩 감산함(갱신되기 때문)
document.getElementById("countdown").innerHTML
= "완료까지 <b>" + count +"</b>초 남았습니다.";
if(count == 0) {
clearInterval(time); // 시간 초기화
alert("시간이 완료되었습니다.")
}
}
//우클릭 사용금지
document.oncontextmenu = function() {
alert("마우스의 우클릭은 사용할 수 없습니다.")
return false;
}
</script>
</body>
</html>'Front-end > Java Script' 카테고리의 다른 글
| JavaScript : 자바스크립트 2진수, 8진수, 10진수, 16진수 표현 (0) | 2020.01.08 |
|---|---|
| JavaScript : String 변수와 Number변수 (0) | 2020.01.08 |
| Java Script : id / class / name - 아이디, 클래스, 네임으로 태그 데이터 받아오기 (0) | 2020.01.07 |
| JavaScript : checkBox 누르면 금액 추가되는 예제 (0) | 2020.01.06 |
| JavaScript : Date()함수로 날짜구하기 (0) | 2020.01.06 |
