반응형
Date 객체
- 날짜와시간(년,월,일,시,분,초,밀리초)을위한메소드를제공하는빌트인 객체, 생성자 함수
- 시간메소드:getHours(),getMinutes(),getSeconds()...
- 날짜메소드:getFullYear().getMonth(),getDate()...
innerText와 innerHTML
- innerText: Element의 속성으로, 해당 Element 내에서 사용자에게
- 보여지는 텍스트 값을 가져오거나 설정 가능
- innerHTML: Element의 속성으로, 해당 Element의 HTML, XML을 가져오거나 설정 가능
// innerText 사용
// 스타일 적용되지 않은 기본 폰트로 <div style='color:red'>innerText</div> 출력
const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT);
// innerHTML 사용
// 스타일 적용된 빨간색 폰트로 innerHTML 출력
const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH);
setTimeout( )
- 특정 시간이 지난 다음에 코드를 실행하는 함수
- 1s = 1,000 ms
- ex) 3s = 3,000 ms
// 2초가 지난 후, “Hello World” 출력 setTimeout(function(){
console.log("Hello World");
}, 2000);
setInterval()
- 특정 코드를 지정한 시간 간격마다 반복해서 실행하는 함수
- setTimeout()는 한 번만 실행, setInterval()은 정해진 시간마다 반복하여 실행
setInterval(function() {
console.log("WINK");
}, 1000); // 1초마다 “WINK” 출력
W
clearInterval()
- setInterval()로 설정한 반복 실행을 중지하는 데 사용하는 함수
var interval = setInterval(function() {
console.log("WINK");
}, 1000); // 1초마다 "WINK" 출력
clearInterval(interval);
// 현재 진행되고 있는 함수의 진행을 멈춤
실습 ~
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<h1>WINK StopWatch</h1>
<h2>20212992 박건민</h2>
<div class="time"><span id="seconds">00</span>:<span id="tens">00</span></div>
<button id="button-start" onclick="buttonStart()">Start</button>
<button id="button-stop" onclick="buttonStop()">Stop</button>
<button id="button-reset" onclick="buttonReset()">Reset</button>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
let seconds = 0; // 스톱워치 ':' 왼쪽 부분
let tens = 0; // 스톱워치 ':' 오른쪽 부분
let interval; // interval 정보 담아둘 변수
let isTimerRunning; // flag 변수
// Start 버튼 클릭시 처리
const buttonStart = () => {
// Start 버튼 연속 클릭 방지 용도
if (isTimerRunning) return;
// setInterval 설정 (스톱워치 ':' 오른쪽 부분에서 10ms ~ 990ms만 보여주기 때문에 interval 주기를 10ms로 하기)
interval = setInterval(startTimer, 10);
// flag 변수 설정
isTimerRunning = true;
}
// Stop 버튼 클릭시 처리
const buttonStop = () => {
// interval 정지 및 flag 변수 설정
clearInterval(interval);
isTimerRunning = false;
}
// Reset 버튼 클릭시 처리
const buttonReset = () => {
// 스톱워치가 정지 중인 경우에만 리셋돼야 함. (flag 변수 사용)
if (!isTimerRunning) {
// 시간 초기화 및 스톱워치 00:00 으로 설정
seconds = 0;
tens = 0;
document.getElementById("seconds").innerText = "00";
document.getElementById("tens").innerText = "00";
}
}
// interval로 사용할 함수
// 먼저 1 tens(10ms)를 증가시키고, 그에 따라 00:00 형식에 맞게 수정하는 방식
const startTimer = () => {
tens++;
// tens가 1자리 수인 경우
if (tens <= 9) {
// ':' 오른쪽 부분 수정
document.getElementById("tens").innerText = "0" + tens;
}
// tens가 2자리 수인 경우
if (tens > 9) {
// ':' 오른쪽 부분 수정
document.getElementById("tens").innerText = tens;
}
// tens가 3자리 수가 된 경우
if (tens == 100) {
seconds++;
tens = 0;
// ':' 오른쪽 부분 수정
document.getElementById("tens").innerText = "00";
if (seconds <= 9) { // seconds가 1자리인 경우
// ':' 왼쪽 부분 수정
document.getElementById("seconds").innerText = "0" + seconds;
} else { // seconds가 2자리 이상인 경우
// ':' 왼쪽 부분 수정
document.getElementById("seconds").innerText = seconds;
}
}
}
style.css
/* CSS */
body {
background: rgba(59,130,246,.5);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height: 100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
color: #000080;
text-align: center;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 2.6em;
text-transform: uppercase;
}
h1 {
margin-top: 100px;
}
.time {
margin-bottom: 50px;
}
#seconds, #tens {
font-size: 2em;
}
button {
-moz-border-radius: 5px; /* Replaced mixin */
-webkit-border-radius: 5px; /* Replaced mixin */
border-radius: 5px; /* Replaced mixin */
-khtml-border-radius: 5px; /* Replaced mixin */
background: rgba(59,130,246,.5);
color: #fff; /* Replaced by $white */
border: solid 1px #fff; /* Replaced by $white */
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
-webkit-transition: all 0.5s ease-in-out; /* Replaced mixin */
-moz-transition: all 0.5s ease-in-out; /* Replaced mixin */
transition: all 0.5s ease-in-out; /* Replaced mixin */
}
button:hover {
-webkit-transition: all 0.5s ease-in-out; /* Replaced mixin */
-moz-transition: all 0.5s ease-in-out; /* Replaced mixin */
transition: all 0.5s ease-in-out; /* Replaced mixin */
background: #fff; /* Replaced by $white */
border: solid 1px #fff; /* Replaced by $white */
color: rgba(59,130,246,.5);
}
결과
반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) (0) | 2024.05.28 |
|---|---|
| [2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습) (0) | 2024.05.24 |
| [2024 신입부원 기초 스터디] 이종윤 #5주차 (JS_실습: Clock만들기) (0) | 2024.05.23 |
| [2024 신입부원 기초 스터디] 김지나 #5주차 (0) | 2024.05.23 |
| [2024 신입부원 기초 스터디] 김민서 #5주차 (0) | 2024.05.23 |
