728x90
명언 랜덤 슬라이드
코드블럭
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-image: url(img/oo.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.wrap {
margin: 0 auto;
height: 100vh;
display: flex;
justify-content: center;
margin-top: 10%;
}
.result {
margin: 0, auto;
width: 1000px;
height: 400px;
border: none;
text-align: center;
}
.quote {
display: inline-block;
font-size: 40px;
margin-bottom: 50px;
line-height: 1.5;
}
.author {
font-size: 25px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="result">
<p class="quote"></p>
<p class="author"></p>
</div>
</div>
</body>
<script>
let wise = 0
const dataQuestion = () => {
const random = Math.floor( Math.random()*30)
wise = random
fetch("json/dummy01.json")
.then(res => res.json())
.then(items => {
document.querySelector(".result .quote").innerHTML=items.quotes[wise].quote
document.querySelector(".result .author").innerHTML=items.quotes[wise].author
});
};
dataQuestion()
setInterval(dataQuestion,5000)
</script>
</html>보충설명
5초마다 JSON 파일에서 명언을 가져와서 화면에 출력해줍니다.
wise 변수를 0으로 설정하여주고 dataQuestion 함수를 정의합니다. dataQuestion 함수 안에서는 0부터 29까지의 랜덤한 수를 wise 변수에 저장하고, fetch를 이용하여 json/dummy01.json 파일을 가져옵니다.
가져온 파일을 items 변수에 저장하고, items.quotes[wise]를 이용하여 wise 변수에 저장된 인덱스에 해당하는 명언을 추출합니다. 추출한 명언을 document.querySelector로 해당 클래스를 가진 요소에 출력합니다.
dataQuestion() 함수를 실행하고 setInterval을 이용하여 5초(5000)마다 dataQuestion() 함수를 실행합니다.