✅ 오늘의 문제 : 반복문과 조건문을 이용하여 간단한 스톱워치 만들기
👉 예시
✅ 오늘의 문제 풀이 인증
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript7</title>
<script src="./6.js"></script>
<link rel="stylesheet" href="./6.css">
</head>
<body>
<div class="all">
<h1>StopWatch</h1>
<h1 id="display">00:00:00</h1>
<button id="bt_start" onclick="start_click()">START</button>
<button id="bt_stop" onclick="stop_click()">STOP</button>
<button onclick="reset_click()">RESET</button>
</div>
</body>
</html><CSS>
button{
border: none;
background-color: rgb(33, 41, 146);
color: aliceblue;
border-radius: 10px;
line-height: 40px;
text-align: center;
}
.all{
background-color: aqua;
padding-left: 30px;
padding-bottom: 20px;
padding-top: 10px;
border-radius: 10px;
width: 200px;
margin: auto;
}
#display{
margin-left: 20px;
}<javascript>
let sec = 0;
let min= 0;
let hour = 0;
let display_sec=0;
let dispaly_min=0;
let display_hour=0;
function StopWatch()
{
sec++;
if (sec == 60) {
min++;
sec = 0;
if (min == 60) {
hour++;
min = 0;
}
}
if (sec<10)
{
display_sec='0' + sec.toString();
}
else
{
display_sec=sec;
}
if (min<10){
display_min='0'+min.toString();
}
else
{
display_min=min;
}
if (hour<10){
display_hour='0'+hour.toString();
}
else
{
display_hourc=hour;
}
document.getElementById('display').innerHTML = display_hour + ":" + display_min + ":" + display_sec;
}
//start 버튼을 눌렀을 때
function start_click(){
repeat = setInterval(StopWatch, 1000);
}
//stop 버튼을 눌렀을 때
function stop_click(){
clearInterval(repeat);
}
//reset버튼을 눌렀을 때
function reset_click(){
display_sec=0;
dispaly_min=0;
display_hour=0;
window.clearInterval(repeat);
document.getElementById('display').innerHTML="00:00:00";
}<결과화면>
✅ 오늘의 한마디
<javascript 변수선언 var,let,const 차이>
var: 1. 중복 선언이 가능하다.
2. 값의 재할당이 가능하다.
3. 함수 내부에 선언된 변수만 지역변수이며, 나머지는 모두 전역변수로 간주한다.
let: 1. 중복 선언이 불가능하다.
2. 값의 재할당이 가능하다.
3. 함수 내부에서 선언된 변수뿐만 아니라, if문이나 for문 등의 코드 블럭에서
선언된 변수도 지역변수로 취급한다.
const: 1. 중복선언이 불가능하다.
2. 값의 재할당이 불가능하다.
3. 함수 내부에서 선언된 변수뿐만 아니라, if문이나 for문 등의 코드 블럭에서
선언된 변수도 지역변수로 취급한다.<javascript setTimeout/setInterval>
setTimeout: 일정시간이 지난뒤 실행하는 함수
setInterval: 일정시간 간격으로 반복하는 함수'웹 공부 > javascript' 카테고리의 다른 글
| 코딩 스터디(모각코) 9일차 - 한 입 웹개발(JS) (0) | 2021.07.20 |
|---|---|
| 코딩 스터디(모각코) 8일차 - 한 입 웹개발(JS) (0) | 2021.07.16 |
| 코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS) (0) | 2021.07.12 |
| 코딩 스터디(모각코) 5일차 - 한 입 웹개발(JS) (0) | 2021.07.09 |
| 코딩 스터디(모각코) 4일차 - 한 입 웹개발(JS) (0) | 2021.07.08 |