2023.10.20
Day45 세 줄 요약
setInterval() : 설정한 시간을 간격으로 함수 내용 반복 실행
setTimeout() : 설정한 시간이 지나면 함수 내용 실행
padStart() : 문자열의 앞부분을 '특정길이' 만큼 '특정문자' 로 채움
Interval 관련 함수
setInterval()
단위 시간 동안 해당 내용 반복
변수 하나를 선언하고 해당 변수에 담아서 사용
함수내용 다음에 ms(millisecond) 단위로 단위 시간 설정
let myTime;
myTime = setInterval(() => {
함수내용
}, 1000); // 1초(1000ms)마다 실행
clearInterval()
특정 변수에 담긴 Interval 내용을 초기화
clearInterval(myTime);
setTimeout()
설정한 시간(ms)이 지나면 해당 함수 실행
setTimeout(() => {
alert('google 사이트로 이동합니다.');
location.href = "https://www.google.com";
}, 5000);
source code
* <body onload="timing()"> : 페이지가 load되면 timing() 함수 실행
<body onload="timing()">
<h1><span id="cnt">3</span>초 후에 google 사이트로 이동합니다.</h1>
</body>
<script>
let myTime;
let x = 0;
let x1000 = 0;
function timing() {
x = document.getElementById("cnt").innerHTML;
x1000 = eval(x + ('*1000'));
myTime = setInterval(() => {
x--;
cnt.innerHTML = x;
if (x == 0) {
clearInterval(myTime);
}
}, 1000);
setTimeout(() => {
alert('google 사이트로 이동합니다');
location.href = "https://www.google.com";
}, x1000)
}
</script>
실행결과
Date()
Date()
자바스크립트에서 제공하는 현재날짜시간 함수
let now = new Date();
let yy = now.getFullYear(); // 년도
let mm = now.getMonth(); // 월
let dd = now.getDate(); // 일
let days = now.getDay(); // 요일
요일은 일요일부터 토요일까지 각각 숫자 0~6에 해당
- 일요일 : 0, 월요일 : 1, 토요일 : 6
Timer 예제
* String(valueA).padStart(n, 'a') : valueA를 문자열로 변환할 때 빈 자리는 n번째 까지 'a'로 채움
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<title>타이머</title>
</head>
<body>
<fieldset>
<legend>타이머</legend>
<div class="container">
<div class="item">
<input id="hour" type="text" />
<button class="button btn1" id="hUp">↑</button>
<button class="button btn2" id="hDown">↓</button>
<label for="hour">시간</label>
</div>
<div class="item">
<input id="min" type="text" />
<button class="button btn1" id="mUp">↑</button>
<button class="button btn2" id="mDown">↓</button>
<label for="min"> 분 </label>
</div>
<div class="item">
<input id="sec" type="text" />
<button class="button btn1" id="sUp">↑</button>
<button class="button btn2" id="sDown">↓</button>
<label for="sec"> 초 </label>
</div>
<div class="item">
<button id="start">시작</button>
<button id="reset">리셋</button>
</div>
</div>
<hr />
<table>
<tr>
<td onclick="plusS()">10초</td>
<td onclick="plusM(1)">1분</td>
<td onclick="plusM(5)">5분</td>
<td onclick="plusM(10)">10분</td>
<td onclick="plusM(30)">30분</td>
<td onclick="plusH()">1시간</td>
</tr>
</table>
</fieldset>
</body>
<script>
let hour = document.getElementById("hour"); // 시
let min = document.getElementById("min"); // 분
let sec = document.getElementById("sec"); // 초
let start = document.getElementById("start"); // 시작버튼
let reset = document.getElementById("reset"); // 리셋버튼
let hUp = document.getElementById("hUp"); // 시up
let hDown = document.getElementById("hDown"); // 시down
let mUp = document.getElementById("mUp"); // 분up
let mDown = document.getElementById("mDown"); // 분down
let sUp = document.getElementById("sUp"); // 초up
let sDown = document.getElementById("sDown"); // 초down
let count = 0;
let interval;
hour.value = "00";
min.value = "00";
sec.value = "00";
// 시간 up
hUp.addEventListener("click",()=>{
count = hour.value; // count에 기존에 설정된 시간을 입력
if(count<99){
count++;
}
hour.value = count; // 바뀐 count값을 시간으로 설정
hour.value = String(hour.value).padStart(2, '0');
});
// 시간 down
hDown.addEventListener("click",()=>{
count = hour.value; // count에 기존에 설정된 시간을 입력
if(count > 0){
count--;
}
hour.value = count; // 바뀐 count값을 시간으로 설정
hour.value = String(hour.value).padStart(2, '0');
});
// 분 up
mUp.addEventListener("click",()=>{
count = min.value; // count에 기존에 설정된 시간을 입력
if(count<59){
count++;
} else {
hour.value++;
hour.value = String(hour.value).padStart(2, '0');
count = 0;
}
min.value = count; // 바뀐 count값을 시간으로 설정
min.value = String(min.value).padStart(2, '0');
});
// 분 down
mDown.addEventListener("click",()=>{
count = min.value; // count에 기존에 설정된 시간을 입력
if(count > 0){
count--;
}
min.value = count; // 바뀐 count값을 시간으로 설정
min.value = String(min.value).padStart(2, '0');
});
// 초 up
sUp.addEventListener("click",()=>{
count = sec.value; // count에 기존에 설정된 시간을 입력
if(count<59){
count++;
} else {
min.value++;
min.value = String(min.value).padStart(2, '0');
count = 0;
}
sec.value = count; // 바뀐 count값을 시간으로 설정
sec.value = String(sec.value).padStart(2, '0');
});
// 초 down
sDown.addEventListener("click",()=>{
count = sec.value; // count에 기존에 설정된 시간을 입력
if(count > 0){
count--;
}
sec.value = count; // 바뀐 count값을 시간으로 설정
sec.value = String(sec.value).padStart(2, '0');
});
// 초 추가
function plusS(){
count = Number(sec.value);
count += 10;
if(count>59){
count -= 60;
min.value++;
min.value = String(min.value).padStart(2, '0');
}
sec.value = count;
sec.value = String(sec.value).padStart(2, '0');
}
// 분 추가
function plusM(x){
count = Number(min.value);
count += x;
if(count>59){
count -= 60;
hour.value++;
hour.value = String(hour.value).padStart(2, '0');
}
min.value = count;
min.value = String(min.value).padStart(2, '0');
}
// 시 추가
function plusH(){
count = Number(hour.value);
if(count<99){
count++;
}
hour.value = count;
hour.value = String(hour.value).padStart(2, '0');
}
// 시작
start.addEventListener("click", () => {
if (start.innerHTML == "시작") {
start.innerHTML = "정지";
clearInterval(interval);
interval = setInterval(() => {
if (sec.value == 0) {
if (min.value == 0) {
if(hour.value == 0) {
alert(`time out!`);
clearInterval(interval);
start.innerHTML = "시작";
} else {
min.value = 59;
sec.value = 59;
hour.value--;
hour.value = String(hour.value).padStart(2, '0');
}
} else {
sec.value = 59;
min.value--;
min.value = String(min.value).padStart(2, '0');
}
} else {
sec.value--;
sec.value = String(sec.value).padStart(2, '0');
}
}, 1000);
} else {
start.innerHTML = "시작";
clearInterval(interval);
}
})
// 리셋
reset.addEventListener("click", () => {
clearInterval(interval);
start.innerHTML = '시작';
hour.value = '00';
min.value = '00';
sec.value = '00';
})
</script>
</html>
css
input{
width:40px;
height:35px;
font-size: 30px;
text-align: right;
}
label{
font-size: 5px;
vertical-align: bottom;
}
.button{
width: 20px;
height: 20px;
text-align: center;
}
.container{
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
.item{
position: relative;
}
.btn1{
top:0%;
position: absolute;
}
.btn2{
bottom:0%;
position: absolute;
}
label{
position: absolute;
left:70px;
bottom: 0%;
}
#start{
position: absolute;
top:20%;
}
#start:active{
position: absolute;
top:20%;
}
#reset{
position: absolute;
left: 50px;
top:20%
}
fieldset{
width: 400px;
height: 100px;
}
legend{
text-align: center;
}
table,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
width: 63px;
height: 20px;
background-color: lightgray;
}
td:hover{
cursor: pointer;
}
실행결과
'Spring-Java > Front-End' 카테고리의 다른 글
| Day44_계산기, ATM 예제 (0) | 2023.10.21 |
|---|---|
| Day43_객체 (0) | 2023.10.21 |
| Day42_배열, 배열의 다양한 기능 (1) | 2023.10.21 |
| Day41_자바스크립트, 자료형, 변수와 함수(addEventListener, jQuery) (1) | 2023.10.21 |
| Day40_상속, 넘침 (0) | 2023.10.16 |