javascript로 짠 간단한 타이머 프로그램입니다.
<h1>Timer</h1>
<h2>Timer</h2>
<br />
<a href="#" class="startbtn">시작</a>
<a href="#" class="stopbtn">일시정지</a>
let txtArea = document.querySelector('h2');
let startEl = document.querySelector('.startbtn');
let stopEl = document.querySelector('.stopbtn');
let state = false;
let timer;
let count=0;
let timerId;
timer = {
run: function (){
clearTimeout(timerId);
txtArea.textContent = count++;
timerId = setTimeout(timer.run, 1000);
},
stop: function(){
clearTimeout(timerId);
}
}
timerId = setTimeout(timer.run, 1000);
startEl.addEventListener('click',function(event){
timer.stop();
setTimeout(timer.run, 1000);
});
stopEl.addEventListener('click',function(event){
timer.stop();
});
'coding > web' 카테고리의 다른 글
css, jquery> 사이드바 + 아코디언 메뉴 checkbox checked , transition (0) | 2021.07.16 |
---|---|
CSS keyframes을 이용한 초간단 progress bar (0) | 2021.07.14 |
jQuery 아코디언 메뉴, 사이드바 메뉴 slideUp, slideDown, accordion menu (0) | 2021.06.22 |
jquery 메뉴바 스크롤 내렸을때 스타일변경 (4) | 2020.04.03 |
css 마우스오버시에 둥둥 뜨는 아이콘 transform, box-shadow animation (0) | 2020.03.31 |