✅ 오늘의 문제 : 전광판 만들기
❗자신이 선택한 문구를 클릭할 때 마다 글자가 하나씩 늘어나도록 하시면 됩니다.
👉 예시
✅ 오늘의 문제 풀이 인증
<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">
<link rel="stylesheet" href="./8.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
<script src="./8.js"></script>
<title>전광판 만들기</title>
</head>
<body>
<div class="all">
<img src="./img/신데릴라.PNG">
<h1 id = h1></h1>
<button onclick="btn_click()">click!</button>
</div>
</body>
</html><CSS>
.all{
width: 600px;
margin: auto;
}
*{
font-family: 'Gamja Flower', cursive;
}
img{
width: 600px;
height: 500px;
}
button{
border: none;
background-color:rgb(238, 166, 31);
color: aliceblue;
line-height: 70px;
font-size: 3rem;
border-radius: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
#h1{
font-size: 4rem;
display: block;
margin-left: 200px;
color: rgb(240, 151, 49);
}<javascript>
var name = "모짜렐라"
var count =0;
function btn_click() {
var answer = document.getElementById('h1');
console.log(count);
console.log(name.length);
if( name.length > count)
{
document.getElementById("h1").innerText += name[count];
}
else{
count =0;
document.getElementById("h1").innerText="";
}
count++;
}<결과화면>
✅ 오늘의 한마디
'웹 공부 > javascript' 카테고리의 다른 글
| 코딩 스터디(모각코) 10일차 - 한 입 웹개발(JS) (0) | 2021.07.27 |
|---|---|
| 코딩 스터디(모각코) 9일차 - 한 입 웹개발(JS) (0) | 2021.07.20 |
| 코딩 스터디(모각코) 7일차 - 한 입 웹개발(JS) (0) | 2021.07.13 |
| 코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS) (0) | 2021.07.12 |
| 코딩 스터디(모각코) 5일차 - 한 입 웹개발(JS) (0) | 2021.07.09 |