슈퍼코딩/기초
2024.04.08(월) 슈퍼코딩 신입연수원 2주차 Day 1 후기 - 타이머 구현
곰돌이볼
2024. 4. 8. 17:11
- web API
- script 태그는 보통 body 태그 끝에 넣음
- css는 head 태그의 끝에 넣음
- setInterval() : 주기적 호출
- .padStart(최대 길이, "채울 문자열") : 문자열 메서드로, 문자 규격을 맞출 때 사용
- timer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 class="time">00:00</h1>
<h1 class="timer">00:00</h1>
<script src="timer.js"></script>
</body>
</html>- timer.js
// 현재 시간
function setTime() {
const time = new Date();
const minuates = time.getMinutes().toString();
const seconds = time.getSeconds().toString();
const timeH1 = document.querySelector(".time");
timeH1.innerText = `${minuates.padStart(2, "0")}:${seconds.padStart(2, "0")}`; // 변수를 이용해서 텍스트값 변경
}
// 주기마다 함수 호출
setInterval(setTime, 1000); // ms 단위
// ms단위 이후로 호출
setTimeout(setTime, 1000); // ms 단위
// 타이머
const start_time = new Date(); // 시작시간
function timer() {
const current_time = new Date(); // 현재시간
const flow_time = new Date(current_time - start_time); // 흐른 시간
const minutes = flow_time.getMinutes().toString().padStart(2, "0");
const seconds = flow_time.getSeconds().toString().padStart(2, "0");
const timeH2 = document.querySelector(".timer");
timeH2.innerHTML = `${minutes}:${seconds}`;
}
setInterval(timer, 1000);- 실행결과
- wordle 게임 구현
- 조건
- 5글자 단어(존재하지 않은 단어 OK)
- 6번의 시도가능
- 존재하면 노란색, 위치도 맞으면 초록색으로 표시
- 게임 종료 판단
- (추가) 상단에 게임 시간 표시하기
- (선택) 키보드에도 동일하게 표시
- (선택) 키보드 클릭으로도 입력
- 조건