-
[모각코+] 자바스크립트 12월과정 7일차모각코+/Javascript 2021. 12. 28. 21:45728x90
https://cafe.naver.com/codeuniv/55314?boardType=L
[모각코+ 출석 인증] 7일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
이번 과제는 스톱워치 만들기였습니다.
바로 시작할게요 !
HTML 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>스탑워치</title> <link rel="stylesheet" href="./day7.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap'); </style> </head> <body> <div class="contain"> <h1 id="stopwatch"> 00:00:00 </h1> <div class="btn"> <button id="btn1" onclick=startWatch()>시작</button> <button id="btn2" onclick=stopWatch()>멈춤</button> <button id="btn3" onclick=resetWatch()>초기화</button> </div> <script src="./day7.js"></script> </div> </body> </html>
CSS 파일
.contain { margin: 100px; font-family: 'Black Han Sans', sans-serif; font-family: 'Single Day', cursive; font-size: large; } #btn1 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-right: -6px; } #btn3 { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-left: -6px; } .btn button{ border: 1px solid skyblue; background-color: rgba(0,0,0,0); color: skyblue; padding: 5px; font-family: 'Black Han Sans', sans-serif; font-family: 'Single Day', cursive; font-size: large; } .btn button:hover{ color:white; background-color: skyblue; }
JS 파일
const watch = document.getElementById("stopwatch"); let timerstate; let time=0; let hour; let min; let sec; function printTime(){ time++; watch.innerText=getTime(); } function startWatch(){ printTime(); stopWatch(); timerstate = setTimeout(startWatch,1000); } function stopWatch(){ if(timerstate != null){ clearTimeout(timerstate); } } function resetWatch(){ stopWatch(); watch.innerText="00:00:00"; time = 0; } function getTime(){ hour = parseInt(String(time / (60*60))); min = parseInt(String((time-(hour*60*60))/60)); sec = time % 60; return String(hour).padStart(2, '0') + ":" + String(min).padStart(2, '0') + ":" + String(sec).padStart(2, '0'); }
728x90'모각코+ > Javascript' 카테고리의 다른 글
[모각코+] 자바스크립트 12월과정 9일차 (0) 2021.12.31 [모각코+] 자바스크립트 12월과정 8일차 (0) 2021.12.29 [모각코+] 자바스크립트 12월과정 6일차 (0) 2021.12.27 [모각코+] 자바스크립트 12월과정 5일차 (0) 2021.12.26 [모각코+] 자바스크립트 12월과정 4일차 (0) 2021.12.23