Problem Solving
[JavaScript] Requirements Q13~16: Timer
Isaac S. Lee
2023. 10. 12. 16:33
📌Requirements Q13: 카운트 다운
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
#num {
font-size: 10em;
font-weight: bold;
text-align: center;
width: 250px;
display: block;
margin: 100px auto;
border: 0px;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
카운트 다운을 구현하시오.
카운트가 0이 되면 구글로 이동하시오.
esc 키를 누르면 카운트를 중단하시오.
-->
<div>
<input type="text" name="num" id="num" value="10">
</div>
<div class="script script42_2" style="left: 170px; top: 460px;">
<!-- <div style="left: 35px; top: 110px;"><input type='text'> 입니다.<br>테두리를 감췄습니다.</div> -->
</div>
<script>
var n = 10;
var timer = setInterval(function() {
n--;
document.all.num.value = n;
if (n == 0) {
clearInterval(timer);
location.href = "http://google.com";
}
}, 1000);
window.onkeydown = function() {
if (event.keyCode == 27) {
clearInterval(timer);
document.body.bgColor = "tomato";
}
};
</script>
</body>
</html>
📌Requirements Q14: 뉴스 서비스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
body {
margin: 30px;
}
#main {
border: 1px solid #ccc;
width: 900px;
padding: 20px;
}
#main #txt1,
#main #txt2 {
width: 100%;
height: 250px;
outline: none;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!-- 뉴스 서비스를 구현하시오. -->
<div id="main">
<textarea name="txt1" id="txt1" readonly></textarea>
<hr>
<textarea name="txt2" id="txt2">
네, 낮동안에도 찬바람이 강하게 불고있습니다.
때문에 체감상 느껴지는 온도는 현재기온보다 2~3도가량 낮게 나타나고 있는데요.
남부해안지역과 제주도를 중심으로는 강풍주의보도 이어지고 있기 때문에 시설물 피해 없도록 주의하셔야겠습니다.
쌀쌀했던 어제보다도 기온이 더 오르지 못하고있습니다.
현재기온 서울 7.3도, 대전 9.3도, 부산 6.8도로 이맘때 평년수준을 밑돌고있고요.
찬바람이 더해지면서 체감상 느껴지는 날씨는 더 쌀쌀합니다.
꽃샘추위는 내일 절정을 보이겠습니다.
</textarea>
<input type="button" value="시작" name="btn1" id="btn1">
<input type="button" value="정지" name="btn2" id="btn2">
</div>
<script>
var txt1, txt2, btn1, btn2;
var length = 0;
var timer = 0;
window.onload = function () {
txt1 = document.all.txt1;
txt2 = document.all.txt2;
btn1 = document.all.btn1;
btn2 = document.all.btn2;
btn1.onclick = function () {
if (timer == 0) {
timer = setInterval(function () {
txt1.value = txt2.value.substr(0, length);
length++;
if (length == txt2.value.length) clearInterval(timer);
}, 50);
}
};
btn2.onclick = function () {
clearInterval(timer);
timer = 0;
};
};
</script>
</body>
</html>
📌Requirements Q15: 타이머 (텍스트)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
body {
margin: 50px;
}
#timer {
border: 1px solid gray;
width: 560px;
height: 159px;
/* margin: 50px auto 20px auto; */
padding: 5px;
text-align: center;
}
#timer:after {
content: " ";
display: block;
clear: both;
}
#timer input, #timer span {
float: left;
font-size: 7em;
}
#timer input {
width: 155px;
border: 0px solid black;
outline: none;
text-align: center;
}
#timer span {
margin-top: 3px;
}
#btns {
width: 560px;
/* margin: 20px auto; */
margin-top: 20px;
text-align: center;
}
#btns input {
border: 1px solid #aaa;
background-color: white;
width: 30%;
height: 50px;
outline: none;
cursor: pointer;
}
#btns input:disabled {
background-color: #eee;
cursor: not-allowed;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
타이머를 구현하시오.
<input type="text">를 사용한다.
let n = 0; 누적 변수를 사용한다.
누적 변수의 값을 시,분,초 단위로 환산한다.
-->
<div id="timer">
<input type="text" name="txt1" id="txt1">
<span>:</span>
<input type="text" name="txt2" id="txt2">
<span>:</span>
<input type="text" name="txt3" id="txt3">
</div>
<div id="btns">
<input type="button" value="시작" name="btn1">
<input type="button" value="멈춤" name="btn2" disabled>
<input type="button" value="종료" name="btn3" disabled>
</div>
<script>
var txt1, txt2, txt3;
var btn1, btn2, btn3;
var n = 0;
var timer = 0;
window.onload = function() {
txt1 = document.all.txt1;
txt2 = document.all.txt2;
txt3 = document.all.txt3;
btn1 = document.all.btn1;
btn2 = document.all.btn2;
btn3 = document.all.btn3;
init();
//시작
btn1.onclick = function() {
if (timer == 0) {
timer = setInterval(function() {
txt3.value = formatnumber(n % 100);
txt2.value = formatnumber(n / 100 % 60);
txt1.value = formatnumber(n / 100 / 60)
n++;
}, 10);
btn1.disabled = true;
btn2.disabled = false;
btn3.disabled = false;
}
};
//멈춤
btn2.onclick = function() {
clearInterval(timer);
timer = 0;
btn1.disabled = false;
btn2.disabled = true;
btn3.disabled = false;
};
//종료
btn3.onclick = function() {
clearInterval(timer);
timer = 0;
btn1.disabled = false;
btn2.disabled = true;
btn3.disabled = true;
init();
n = 0;
};
};
function formatnumber(num) {
if (num < 10)
return "0" + parseInt(num);
else
return parseInt(num);
}
function init() {
txt1.value = "00";
txt2.value = "00";
txt3.value = "00";
}
</script>
</body>
</html>
📌Requirements Q16: 타이머 (이미지)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="in">
<meta name="Generator" content="Visual Studio Code">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="stylesheet" href="basic.css">
<style>
body {
margin: 50px;
}
#timer {
border: 1px solid gray;
width: 640px;
/* margin: 50px auto 20px auto; */
padding: 25px;
}
#timer:after {
content: " ";
display: block;
clear: both;
}
#timer img,
#timer span {
float: left;
font-size: 7em;
}
#timer img {
width: 95px;
height: 139px;
border: 0px;
outline: none;
}
#timer span {
margin-top: -10px;
}
#btns {
width: 680px;
margin-top: 20px;
text-align: center;
}
#btns input {
border: 1px solid #aaa;
background-color: white;
width: 30%;
height: 50px;
outline: none;
cursor: pointer;
}
#btns input:disabled {
background-color: #eee;
cursor: not-allowed;
}
</style>
</head>
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
<!--
타이머를 구현하시오.
<img>를 사용한다.
let n = 0; 누적 변수를 사용한다.
누적 변수의 값을 시,분,초 단위로 환산한다.
-->
<div id="timer">
<img name="img1">
<img name="img2">
<span>:</span>
<img name="img3">
<img name="img4">
<span>:</span>
<img name="img5">
<img name="img6">
</div>
<div id="btns">
<input type="button" value="시작" name="btn1">
<input type="button" value="멈춤" name="btn2" disabled>
<input type="button" value="종료" name="btn3" disabled>
</div>
<script>
var img1, img2, img3, img4, img5, img6;
var btn1, btn2, btn3;
var n = 0;
var timer = 0;
window.onload = function () {
img1 = document.all.img1;
img2 = document.all.img2;
img3 = document.all.img3;
img4 = document.all.img4;
img5 = document.all.img5;
img6 = document.all.img6;
btn1 = document.all.btn1;
btn2 = document.all.btn2;
btn3 = document.all.btn3;
init();
//시작
btn1.onclick = function () {
if (timer == 0) {
timer = setInterval(function () {
console.log(n);
console.log(formatnumber(n % 100));
console.log(formatnumber(n % 100).substr(0, 1));
console.log(formatnumber(n % 100).substr(1, 1));
img5.src = "images/" + formatnumber(n % 100).substr(0, 1) + ".png";
img6.src = "images/" + formatnumber(n % 100).substr(1, 1) + ".png";
img3.src = "images/" + formatnumber(n / 100 % 60).substr(0, 1) + ".png";
img4.src = "images/" + formatnumber(n / 100 % 60).substr(1, 1) + ".png";
img1.src = "images/" + formatnumber(n / 100 / 60).substr(0, 1) + ".png";
img2.src = "images/" + formatnumber(n / 100 / 60).substr(1, 1) + ".png";
n++;
}, 10);
btn1.disabled = true;
btn2.disabled = false;
btn3.disabled = false;
}
};
//멈춤
btn2.onclick = function () {
clearInterval(timer);
timer = 0;
btn1.disabled = false;
btn2.disabled = true;
btn3.disabled = false;
};
//종료
btn3.onclick = function () {
clearInterval(timer);
timer = 0;
btn1.disabled = false;
btn2.disabled = true;
btn3.disabled = true;
init();
n = 0;
};
};
function formatnumber(num) {
if (num < 10)
return "0" + num;
else
return "" + num;
}
function init() {
img1.src = "images/0.png";
img2.src = "images/0.png";
img3.src = "images/0.png";
img4.src = "images/0.png";
img5.src = "images/0.png";
img6.src = "images/0.png";
}
</script>
</body>
</html>