✅오늘의 과제
➰전광판 만들기 - 전광판 글씨 누르면 글자 하나씩 늘어나게 하기
➰코드
day8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day8</title>
<style>
@font-face {
font-family: 'SF_IceLemon';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_IceLemon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
display: flex;
justify-content: center;
}
#nameBoard {
text-align: center;
background-color: darkcyan;
margin-top: 30vh;
width: 700px;
height: 300px;
border-radius: 30px;
}
#nickName {
font-family: 'SF_IceLemon';
font-size: 60px;
padding-top: 30px;
}
#boardBtn {
font-family: 'SF_IceLemon';
background-color: slategray;
font-size: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="nameBoard">
<p id="nickName" onclick="nameClicked()">전광판 버튼을 클릭하세요!</p><br>
<button type="button" id="boardBtn" onclick="buttonClicked()">전광판 버튼</button>
</div>
<script src="day8.js"></script>
</body>
</html>
day8.js
let name = document.getElementById("nickName");
let mando = ["만", "만두", "만두야 ", "만두야 코", "만두야 코딩", "만두야 코딩하", "만두야 코딩하자"];
let count = 0;
function buttonClicked() {
name.innerHTML= mando[0];
}
function nameClicked() {
count++;
if (count >= 7) {
count %= 7;
}
name.innerHTML= mando[count];
}
코드 설명
전광판에 뜨는 글씨를 p태그 안에 넣고 id를 nickName으로 했다. 변수 name에 id가 nickName인 요소를 선택해서 대입해두었다. 전광판에 나타날 문장을 한 글자씩 늘려서 mando 배열의 원소로 각각 저장했다.
처음에 전광판 버튼을 클릭하면 buttonClicked() 함수를 실행된다. 전광판에 글씨가 나오기 시작하고 전광판에 나온 글씨를 클릭하면 변수 count의 값이 1씩 커진다. 그리고 전광판에 mando배열의 해당 인덱스를 가진 원소를 화면에 보여준다. 배열의 인덱스가 7까지 있으므로 변수 count가 7보다 같거나 크면 변수 count를 7로 나눈 나머지를 변수 count에 대입해 같은 동작을 하게 구현했다.
➰코드실행화면(https://jsday8.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day8
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
'WEB > JS' 카테고리의 다른 글
| [JS] 9-2. 과제 - 객체 (0) | 2021.09.29 |
|---|---|
| [JS] 9-1. 객체 (0) | 2021.09.29 |
| [JS] 8-1. 함수 (2) | 2021.09.21 |
| [JS] 7-2. 과제 - 조건문 및 반복문 (0) | 2021.09.21 |
| [JS] 7-1. 조건문 및 반복문 (0) | 2021.09.21 |
✅오늘의 과제
➰전광판 만들기 - 전광판 글씨 누르면 글자 하나씩 늘어나게 하기
➰코드
day8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day8</title>
<style>
@font-face {
font-family: 'SF_IceLemon';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_IceLemon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
display: flex;
justify-content: center;
}
#nameBoard {
text-align: center;
background-color: darkcyan;
margin-top: 30vh;
width: 700px;
height: 300px;
border-radius: 30px;
}
#nickName {
font-family: 'SF_IceLemon';
font-size: 60px;
padding-top: 30px;
}
#boardBtn {
font-family: 'SF_IceLemon';
background-color: slategray;
font-size: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="nameBoard">
<p id="nickName" onclick="nameClicked()">전광판 버튼을 클릭하세요!</p><br>
<button type="button" id="boardBtn" onclick="buttonClicked()">전광판 버튼</button>
</div>
<script src="day8.js"></script>
</body>
</html>
day8.js
let name = document.getElementById("nickName");
let mando = ["만", "만두", "만두야 ", "만두야 코", "만두야 코딩", "만두야 코딩하", "만두야 코딩하자"];
let count = 0;
function buttonClicked() {
name.innerHTML= mando[0];
}
function nameClicked() {
count++;
if (count >= 7) {
count %= 7;
}
name.innerHTML= mando[count];
}
코드 설명
전광판에 뜨는 글씨를 p태그 안에 넣고 id를 nickName으로 했다. 변수 name에 id가 nickName인 요소를 선택해서 대입해두었다. 전광판에 나타날 문장을 한 글자씩 늘려서 mando 배열의 원소로 각각 저장했다.
처음에 전광판 버튼을 클릭하면 buttonClicked() 함수를 실행된다. 전광판에 글씨가 나오기 시작하고 전광판에 나온 글씨를 클릭하면 변수 count의 값이 1씩 커진다. 그리고 전광판에 mando배열의 해당 인덱스를 가진 원소를 화면에 보여준다. 배열의 인덱스가 7까지 있으므로 변수 count가 7보다 같거나 크면 변수 count를 7로 나눈 나머지를 변수 count에 대입해 같은 동작을 하게 구현했다.
➰코드실행화면(https://jsday8.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day8
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
'WEB > JS' 카테고리의 다른 글
| [JS] 9-2. 과제 - 객체 (0) | 2021.09.29 |
|---|---|
| [JS] 9-1. 객체 (0) | 2021.09.29 |
| [JS] 8-1. 함수 (2) | 2021.09.21 |
| [JS] 7-2. 과제 - 조건문 및 반복문 (0) | 2021.09.21 |
| [JS] 7-1. 조건문 및 반복문 (0) | 2021.09.21 |
