JS(Vanilla)
이벤트 응용
<!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>Document</title>
<style>
@keyframes cursor {
50% {
border-color: transparent;
}
}
.text {
border-right: solid black;
animation: cursor 0.5s ease infinite;
display: inline;
}
</style>
</head>
<body>
<h1 class="text"></h1>
<script>
var textcontent = "hello world!";
var text = document.querySelector(".text");
var index = 0;
text.addEventListener("click", typing);
function typing() {
text.innerHTML += textcontent[index++];
if (index > textcontent.length) {
text.innerHTML = "";
index = 0;
}
}
</script>
</body>
</html>
var textcontent = "hello world!";
var text = document.querySelector(".text");
var index = 0;
text.addEventListener("click", typing);
function typing() {
text.innerHTML += textcontent[index++];
if (index > textcontent.length) {
text.innerHTML = "";
index = 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>자판기 만들기</title>
<meta charset="UTF-8" />
<style>
#soda, #coke, #water{
color: red;
}
@keyframes watch{
0%{transform: translate(0);}
20%{transform: translate(-2px, 2px);}
40%{transform: translate(-2px, -2px);}
60%{transform: translate(2px, 2px);}
80%{transform: translate(2px, -2px);}
100%{transform: translate(0);}
}
.shake {
width:100px;
height:100px;
background:url('./coca-cola-png-41657.png') center center / 100% no-repeat;
animation: watch 0.3s linear infinite both;
}
</style>
</head>
<body>
<!-- 판매하는 제품버튼 (누르면 제품구매)-->
<input type="button" id="soda" value="데미소다(700)" />
<input type="button" id="coke" value="코카콜라(800)" />
<input type="button" id="water" value="믈(500)" />
<br />
<br />
<!-- 동전투입버튼 (누르면 동전투입)-->
<input type="button" id="btn1" value="1000원" />
<input type="button" id="btn2" value="500원" />
<input type="button" id="btn3" value="100원" />
<br />
<br />
<!-- current는 현재 금액을 표시-->
현재 금액 : <span id="current"></span>
<div class="shake"></div>
<script>
var coin = 0;
document.getElementById("current").innerHTML = coin + "원";
//현재 금액에 따라 제품색상 변하게 해주는 함수
function color_change() {
//만약 1000원이상 들어있으면 모든 제품을 다 구매가능하니 전부 파란색으로 변경
if (coin >= 1000) {
document.getElementById("soda").style.color = "blue";
document.getElementById("coke").style.color = "blue";
document.getElementById("water").style.color = "blue";
}
else if (coin >= 800) {
document.getElementById("coke").style.color = "blue";
}
else if (coin >= 700) {
document.getElementById("soda").style.color = "blue";
document.getElementById("coke").style.color = "blue";
} else if (coin >= 500) {
document.getElementById("water").style.color = "blue";
} else {
document.getElementById("soda").style.color = "red";
document.getElementById("coke").style.color = "red";
document.getElementById("water").style.color = "red";
}
}
function click_btn1() {
coin = coin + 1000;
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
function click_btn2() {
coin += 500;
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
function click_btn3() {
coin += 100;
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
function click_soda() {
if (coin < 700) {
alert("돈이 부족합니다");
} else {
coin -= 700;
alert("데미소다가 나왔습니다.");
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
}
function click_water() {
if (coin < 500) {
alert("돈이 부족합니다");
} else {
coin -= 500;
alert("물이 나왔습니다.");
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
}
function click_coke() {
if (coin < 800) {
alert("돈이 부족합니다");
} else {
coin -= 800;
alert("코카콜라가 나왔습니다.");
color_change();
document.getElementById("current").innerHTML = coin + "원";
}
}
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", click_btn1);
const btn2 = document.getElementById("btn2");
btn2.addEventListener("click", click_btn2);
const btn3 = document.getElementById("btn3");
btn3.addEventListener("click", click_btn3);
const coffee = document.getElementById("coke");
coffee.addEventListener("click", click_coke);
const water = document.getElementById("water");
water.addEventListener("click", click_water);
const tea = document.getElementById("soda");
tea.addEventListener("click", click_soda);
</script>
</body>
</html>