<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>setInterval함수</title>
</head>
<body>
<h3>텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.</h3>
<hr/>
<div>
<span id="span" style="background-color: yellow;">자동 회전하는 텍스트!</span>
</div>
<script>
let span = document.getElementById("span");
let timerID = setInterval("doRotate()", 200); //200밀리초 주기로 doRotate()함수 실행
//DOM객체의 이벤트리스너 속성을 이용하여 이벤트 처리
span.onclick = function (e) {
clearInterval(timerID); //타이머 해제, 문자열 회전 중단
}
function doRotate() {
let str = span.innerHTML;
let firstChar = str.substr(0, 1);
//문자열 중 첫번째 문자열을 반환 substr(start, length)로 start색인번호부터 length인증 반환
let remains = str.substr(1, str.length-1);
/* - 1번부터 나머지 모두 반환
- js에는 substring(start, end)메서드도 있다.
*/
str = remains + firstChar;
span.innerHTML = str;
}
</script>
</body>
</html>