728x90
- 자 오늘은 예제입니당
- 이번에도 모던 자바스크립트 책에 있는 예제를 가져왔는데요
- 이번엔 조금 변형을 해서 명언이 적힌 문구가 10초에 한번 씩 변하는 스크립트를 만들어 보았습니다.
- 10초가 생각보다 긴 것 같습니다 ㅋㅋㅋ
- 각설하고 사실 html과 css는 크게 볼게 없습니다.
- 네모난 박스만 만들면 되기 때문이죠
- 보기만 하시죠
- html입니다. css와 javascript는 외부파일로 불러왔습니다.
<!DOCTYPE html>
<html lang="ko">
<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="../homeworkcss/2023.04.15.css">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="ddd">
<p class="p"></p>
<p class="q"></p>
</div>
</div>
</body>
<script hefer src="../homeworkJs/2023.04.15.js"></script>
</html>* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
justify-content: center;
margin-top: 10%;
}
.ddd {
margin: 0, auto;
width: 1000px;
border: 3px solid #000;
text-align: center;
background-color: #a6dec3;
}
.p {
display: inline-block;
font-size: 40px;
padding: 70px 50px 30px;
line-height: 1.5;
}
.q {
text-align: right;
margin-right: 15%;
font-size: 25px;
margin-bottom: 50px;
}- 이제 자바스크립트를 보시죵
let aa = 0
const dataQuestion = () => {
const random = Math.floor( Math.random()*30)
aa = random
fetch("../homeworkJson/dummy01.json")
.then(res => res.json())
.then(items => {
document.querySelector(".ddd .p").innerHTML=items.quotes[aa].quote
document.querySelector(".ddd .q").innerHTML=items.quotes[aa].author
});
};
dataQuestion()
setInterval(dataQuestion,10000)- 일단 명언이 30가지 들어있는 json파일을 fetch와.then을 사용해서 불러왔습니다.
- 그리고 document.querySelector를 사용해서 요소를 선택해 준 다음 innerHTML를 사용해서 json파일에 있는 배열을 넣어주었습니다.
- 그리고 0-29까지의 수를 랜덤으로 하나 만들어 aa 라는 변수에 저장을 시켜주었습니다.
- 그리고 setInterval로 10초마다 한번씩 실행을 시켜주었는데 그앞에 실행문이 왜 또 있느냐 하면 setInterval만 있다면 화면을 켠 직후 10초 동안 문구가 없는 화면이기 때문입니다..
- 아무튼 이렇게 하면 끝!!