[JavaScript] 2021.01.19. DAY_59 표준내장함수_숫자변환, 타이머, 타이머제거함수
2021. 1. 19. 16:34ㆍWeb_Front-end/JavaScript
◎ 숫자변환 함수
parseInt() : 문자열을 정수로 변환
parseFloat() : 문자열을 실수로 변환
문자열이 숫자의 형태일 때만 가능하다
문자열의 시작이 숫자형태면 숫자형태만 변환된다 // ex ) parseInt("1109동") ==> 1109
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parseInt, parseFloat</title>
</head>
<body>
<script type="text/javascript">
let inputA = "52";
let inputB = "168.83";
let inputC = "2021년";
let inputD = "년2021";
//더하기 연산 사용
console.log(inputA+1);
console.log(parseInt(inputA)+1);
//parseInt와 parseFloat의 차이
console.log(parseInt(inputB));
console.log(parseFloat(inputB));
//숫자로시작, 숫자가아닌 문자열이 포함된 문자열 변환
console.log(parseInt(inputC));
console.log(parseInt(inputD));
</script>
</body>
</html>
◎ 타이머 함수
- '특정시간후에' 또는 '특정시간마다' 어떤 일을 할 때 사용
- 시간은 밀리초로 지정한다
- 1초를 나타내려면 1000(밀리초)을 입력한다
setTimeout(함수, 시간) : 특정시간 후에 함수를 실행 //딱 한번 실행
setInterval(함수, 시간) : 특정시간 마다 함수를 실행 //계속 반복
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
// setTimeout() 는 익명함수를 생성해서, 사용해보기
/* let pro = function(){
let today = new Date();
let hours = today.getHours();
let minutes = today.getMinutes();
let seconds = today.getSeconds();
let result = `현재 시각은 ${hours}시 ${minutes}분 ${seconds}초 입니다`;
document.getElementById("time").innerHTML = result;
} */
//setTimeout(pro, 3000);
// setInterval() 는 무명함수를 함수의인자로 바로 사용해보기(이렇게 많이쓴다)
setInterval(function(){
let today = new Date();
let hours = today.getHours();
let minutes = today.getMinutes();
let seconds = today.getSeconds();
let result = `현재 시각은 ${hours}시 ${minutes}분 ${seconds}초 입니다`;
document.getElementById("time").innerHTML = result;
}, 1000)
}
</script>
</head>
<body>
<h2 id="time"></h2>
</body>
</html>
※ 타이머함수 복합적으로 연습해보기
[JavaScript] 2021.01.19. DAY_59 타이머함수, 타이머제거함수 연습하기(substr()사용)
let news_list = [ "전세난에 경기도 아파트 신고가 행진…거래 3건중 1건이 최고가", "공격적 영입 약속하더니..토론토, ERA 4.40 투수와 계약", "'타인의 취향' 프랑스 배우 장 피에르 ..
jjiny-bbany.tistory.com
○ 타이머 제거함수
clearInterval(아이디) : 특정 시간마다 실행하던 함수 호출을 정지
타이머를 중지시키기 위해 타이머를 지정한 함수에 id를 정해준다
※ 시작버튼을 누르면 , 현재시각을 1초마다 표시하고
중지버튼을 누르면, 시각을 표시하던 타이머를 중지하는 코드를 작성해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval에 설정된 타이머를 제거하는 함수 clearInterval</title>
<script type="text/javascript">
window.onload = function() {
//시작, 중지에 사용할 공통 타이머 아이디를 생성해준다
let viewID;
document.getElementById("btnStart").onclick = function() {
viewID = setInterval(()=>{
let today = new Date();
let hours = today.getHours();
let minutes = today.getMinutes();
let seconds = today.getSeconds();
let r = `현재시간은 ${hours}시 ${minutes}분 ${seconds}초 입니다`;
document.getElementById("result").innerHTML = r;
}, 1000)
}
document.getElementById("btnStop").onclick = function() {
clearInterval(viewID);
}
}
</script>
</head>
<body>
<h2>setInterval에 설정된 타이머를 제거하는 함수 clearInterval</h2>
<hr>
<h3 id="result"></h3>
<button id="btnStart">시작</button>
<button id="btnStop">중지</button>
</body>
</html>