728x90
반응형
※10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기
전체 소스
<!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">
<title>p519 마무리 문제</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<link href="https://webfontworld.github.io/ChosunGs/ChosunGs.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
color: #fff;
}
body {
background-image: url(img/monje519.jpg);
background-size: cover;
}
#wrap {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.border {
width: 100%;
height: 250px;
background-color: rgba(0, 0, 0, 0.5);
}
.wisesaying {
padding: 30px;
}
.wisesaying h3 {
padding: 10px 0;
}
.quote{
padding: 20px 0;
font-family: 'NexonLv1Gothic';
}
.author {
padding: 20px 0;
font-family: 'ChosunGs';
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
<div class="wisesaying">
<h3>명언 모음집</h3>
<div class="quote">명언</div>
<div class="author">-<span></span></div>
</div>
</div>
</div>
</body>
<script>
const quote = document.querySelector(".quote");
const author = document.querySelector(".author span");
const datawisesaying = () => {
fetch("json/dummy01.json")
.then(res => res.json())
.then(datas => {
// console.log(datas.quotes[0].quote)
let wisesaying = datas.quotes;
let Random = Math.trunc(Math.random() * wisesaying.length);
let wisesayingRandom = wisesaying[Random];
quote.innerHTML = wisesayingRandom.quote
author.innerHTML = wisesayingRandom.author
// console.log(wisesayingRandom)
});
};
datawisesaying();
setInterval(datawisesaying,10000);
</script>
</html>
javascript
<script>
const quote = document.querySelector(".quote");
const author = document.querySelector(".author span");
const datawisesaying = () => {
fetch("json/dummy01.json")
.then(res => res.json())
.then(datas => {
// console.log(datas.quotes[0].quote)
let wisesaying = datas.quotes;
let Random = Math.trunc(Math.random() * wisesaying.length);
let wisesayingRandom = wisesaying[Random];
quote.innerHTML = wisesayingRandom.quote
author.innerHTML = wisesayingRandom.author
// console.log(wisesayingRandom)
});
};
datawisesaying();
setInterval(datawisesaying,10000);
</script>·텍스트를 넣을 곳을 querySelector을 이용하여 선택자로 만들어 가져옵니다.
·datawisesaying함수를 만들어 fetch를 통해 josn의 파일을 가져오고 then을 통해 파일을 res로변경후 res.json()으로 자바스크립트의 객체로 변경하고 dtas로 이름을 변경하여 쓸 수 있게 해줍니다.
·그후 그 안에 필요한 데이터를 가져와 변수로 저장을 해주었습니다.
·명언을 랜덤으로 보여주기위해 Math를 이용하여 데이터의 갯수만큼 랜덤 숫자가 나오게 저장해 주었습니다.
·데이터를 랜덤으로 가져오게 wisesaying[Random]를 변수로 저장해 주었습니다.
·이제 json에서 가져온 데이터를 넣고싶은 선택자에 innerHTML 이용해 넣어줍니다.
·그후 setInterval()을 이용해서 datawisesaying함수가 10초마다 반복할수 있게 해줍니다.
출처:Do it! 한권으로 끝내는 웹 개발 교과서 웹 개발모던 자바스크립트 프로그래밍의 정석 책 p519