Study/JavaScript
JavaScript : 함수 function 응용하기
posey
2022. 12. 1. 09:27
2022.12.01.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 55
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 55
<함수 function : for 구문을 이용해서 onclick 메뉴 만들어보기>
- HTML
<div class="tabcontent">
<h1>London</h1>
<p>London is the capital city of England.</p>
</div>
<div class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital city of France.</p>
</div>
<div class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the capital city of Japan.</p>
</div>
<div class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital city of Norway.</p>
</div>
<p class="tablink" onclick="tab(0)">London</p>
<p class="tablink" onclick="tab(1)">Paris</p>
<p class="tablink" onclick="tab(2)">Tokyo</p>
<p class="tablink" onclick="tab(3)">Norway</p>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
.tabcontent {
color: #222222;
padding: 50px;
text-align: center;
background: #ccc;
}
.tablink {
float: left;
width: 25%;
background: #555;
text-align: center;
padding: 10px 0;
cursor: pointer;
}
.tablink:hover {
background: #777;
}
- JavaScript
<script>
let chcolor = [
"rgb(252, 187, 187)",
"rgb(140, 204, 140)",
"rgb(145, 205, 237)",
"rgb(245, 231, 161)",
];
let content = document.getElementsByClassName("tabcontent");
let btn = document.getElementsByClassName("tablink");
function tab(j) {
for (let i = 0; i <= 3; i++) {
content[i].style.backgroundColor = chcolor[i];
btn[i].style.backgroundColor = chcolor[i];
content[i].style.display = "none";
content[j].style.display = "block";
}
}
tab(0);
</script>
0
<함수 function : while 반복문을 이용해서 onclick 메뉴 만들어보기>
- HTML
<div class="tabcontent">
<h1>London</h1>
<p>London is the capital city of England.</p>
</div>
<div class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital city of France.</p>
</div>
<div class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the capital city of Japan.</p>
</div>
<div class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital city of Norway.</p>
</div>
<p class="tablink" onclick="tab(0)">London</p>
<p class="tablink" onclick="tab(1)">Paris</p>
<p class="tablink" onclick="tab(2)">Tokyo</p>
<p class="tablink" onclick="tab(3)">Norway</p>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
.tabcontent {
color: #222222;
padding: 50px;
text-align: center;
background: #ccc;
}
.tablink {
float: left;
width: 25%;
background: #555;
text-align: center;
padding: 10px 0;
cursor: pointer;
}
.tablink:hover {
background: #777;
}
- JavaScript
<script>
let chcolor = [
"rgb(252, 187, 187)",
"rgb(140, 204, 140)",
"rgb(145, 205, 237)",
"rgb(245, 231, 161)",
];
let content = document.getElementsByClassName("tabcontent");
let btn = document.getElementsByClassName("tablink");
function tab(j) {
let i = 0;
while (i <= 3) {
content[i].style.backgroundColor = chcolor[i];
btn[i].style.backgroundColor = chcolor[i];
content[i].style.display = "none";
content[j].style.display = "block";
i++;
}
}
tab(0);
</script>
결과는 위의 예제와 동일하다 !
<함수 function : do while 반복문을 이용해서 onclick 메뉴 만들어보기>
- HTML
<div class="tabcontent">
<h1>London</h1>
<p>London is the capital city of England.</p>
</div>
<div class="tabcontent">
<h1>Paris</h1>
<p>Paris is the capital city of France.</p>
</div>
<div class="tabcontent">
<h1>Tokyo</h1>
<p>Tokyo is the capital city of Japan.</p>
</div>
<div class="tabcontent">
<h1>Oslo</h1>
<p>Oslo is the capital city of Norway.</p>
</div>
<p class="tablink" onclick="tab(0)">London</p>
<p class="tablink" onclick="tab(1)">Paris</p>
<p class="tablink" onclick="tab(2)">Tokyo</p>
<p class="tablink" onclick="tab(3)">Norway</p>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
.tabcontent {
color: #222222;
padding: 50px;
text-align: center;
background: #ccc;
}
.tablink {
float: left;
width: 25%;
background: #555;
text-align: center;
padding: 10px 0;
cursor: pointer;
}
.tablink:hover {
background: #777;
}
- JavaScript
<script>
let chcolor = [
"rgb(252, 187, 187)",
"rgb(140, 204, 140)",
"rgb(145, 205, 237)",
"rgb(245, 231, 161)",
];
let content = document.getElementsByClassName("tabcontent");
let btn = document.getElementsByClassName("tablink");
function tab(j) {
let i = 0;
do {
content[i].style.backgroundColor = chcolor[i];
btn[i].style.backgroundColor = chcolor[i];
content[i].style.display = "none";
content[j].style.display = "block";
i++;
} while (i <= 3);
}
tab(0);
</script>
결과는 처음과 동일하다.
for 구문, while 반복문, do while 반복문 3가지의 방식으로 작성해 결과를 동일하게 만들어냈다.
<함수 function : onmouseover 메뉴 만들어보기>
- HTML
<div class="tab_left">
<p class="tablink" onmouseover="tab(0)">content1</p>
<p class="tablink" onmouseover="tab(1)">content2</p>
<p class="tablink" onmouseover="tab(2)">content3</p>
<p class="tablink" onmouseover="tab(3)">content4</p>
<p class="tablink" onmouseover="tab(4)">content5</p>
</div>
<div class="tab_right">
<div class="tabcontent">
<h1>content1</h1>
</div>
<div class="tabcontent">
<h1>content2</h1>
</div>
<div class="tabcontent">
<h1>content3</h1>
</div>
<div class="tabcontent">
<h1>content4</h1>
</div>
<div class="tabcontent">
<h1>content5</h1>
</div>
</div>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
.tab_left {
float: left;
width: 30%;
height: 300px;
background: #f1f1f1;
border: 1px solid #ccc;
box-sizing: border-box;
}
.tablink {
width: 100%;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.tablink:hover {
background: #ddd;
}
.tab_right {
position: relative;
float: left;
width: 70%;
height: 300px;
background: #ddd;
border: 1px solid #ccc;
box-sizing: border-box;
}
.tabcontent {
position: absolute;
top: 40%;
width: 100%;
height: 100%;
}
- JavaScript
<script>
window.open(
"../1201/1201_05_fnc.html",
"함수연습",
"width=500,height=500"
);
let content = document.getElementsByClassName("tabcontent");
let btn = document.getElementsByClassName("tablink");
function tab(j) {
for (let i = 0; i < btn.length; i++) {
content[i].style.display = "none";
content[j].style.display = "block";
}
}
tab(0);
</script>
0
<함수 function : 시계 start & stop onclick 예제>
- HTML
<div id="div"></div>
<button id="start">start</button>
<button id="stop">stop</button>
- JavaScript
<script>
function showtime() {
let a = new Date();
let time = a.toLocaleTimeString();
document.getElementById("div").innerText = time;
}
let interval = setInterval(showtime, 1000);
showtime();
document.getElementById("stop").onclick = function () {
clearInterval(interval);
};
document.getElementById("start").onclick = function () {
interval = setInterval(showtime, 1000);
};
</script>
0
<함수 function : 시계 start & stop onmouseover / onmouseout 예제>
- HTML
<div id="div"></div>
<button id="stop">stop</button>
- JavaScript
<script>
function showtime() {
let a = new Date();
let time = a.toLocaleTimeString();
document.getElementById("div").innerText = time;
}
let interval = setInterval(showtime, 1000);
showtime();
document.getElementById("stop").onmouseover = function () {
clearInterval(interval);
};
document.getElementById("stop").onmouseout = function () {
interval = setInterval(showtime, 1000);
};
</script>
0
마우스를 올리면 시계가 멈추고, 마우스를 다시 떼면 시계가 다시 작동된다.
<함수 function : 아날로그 시계 만들어보기>
- HTML
<div id="content">
<ul class="clock">
<li class="base"></li>
<li class="hour"></li>
<li class="minute"></li>
<li class="second"></li>
<li class="center"></li>
</ul>
</div>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #eee;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
padding: 10px 20px;
margin-top: 30px;
margin-left: 10px;
}
#content {
width: 630px;
height: 630px;
margin: 100px auto;
}
.clock {
position: relative;
list-style: none;
width: 100%;
height: 100%;
}
.clock li {
position: absolute;
width: 630px;
height: 630px;
}
.base {
background: url(../images/clock_bg.png);
}
.hour {
background: url(../images/hour.png);
}
.minute {
background: url(../images/minute.png);
}
.second {
background: url(../images/second.png);
background-size: 630px 630px;
}
.center {
background: url(../images/center_bg.png);
}
- JavaScript
<script>
function clock() {
let today = new Date();
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
time(hour, minute, second);
}
function time(h, m, s) {
h = (360 / 12) * h + 0.5 * m;
m = (360 / 60) * m;
s = (360 / 60) * s;
let hour = document.querySelector(".hour");
let minute = document.querySelector(".minute");
let second = document.querySelector(".second");
hour.style.transform = "rotate(" + h + "deg)";
minute.style.transform = "rotate(" + m + "deg)";
second.style.transform = "rotate(" + s + "deg)";
}
setInterval(clock, 1000);
</script>
0
결과를 보면 현재 시간을 반영해서 변수에 대입한 각도대로 움직인다.
너무 신기하다 !!! 자바스크립트가 제일 논리적이라서 어렵지만 재밌다.
이 예제는 이때까지 한 예제 중 가장 복잡했다.
이론은 다 배운 것이지만 응용해야해서 머리를 굴려야 하는 예제였다.
완성 - !
반응형