728x90
반응형
10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 문제풀이 보러가기
※10초마다 명언가져오기 + 배경화면 바꾸기
전체소스
<!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;
transition: all 0.3s;
}
#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 bgimg = () => {
fetch(`https://source.unsplash.com/random/?wallpapers`)
.then((imgs) => {
let imgurl = imgs.url
console.log(imgurl)
document.body.style.backgroundImage = 'url('+imgurl+')'
});
}
;
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)
});
bgimg();
};
datawisesaying();
setInterval(datawisesaying,10000);
</script>
</html>
10초 마다 명언을 json파일에서 가져오는 것에서 추가로 배경화면도 바뀌게 해주었습니다.
const bgimg = () => {
fetch(`https://source.unsplash.com/random/?wallpapers`)
.then((imgs) => {
let imgurl = imgs.url
console.log(imgurl)
document.body.style.backgroundImage = 'url('+imgurl+')'
});
}함수를 하나 더 만들어서 랜덤으로 이미지가 나오는 사이트를 가져와 필요한 정보를 가져온후 변수로 저장해줍니다.
그후 명언이 나오는 함수가 시작할때 이미지 배경이나오는 함수도 실행해 주면 명언이 바뀔때 마다 배경도 바뀝니다.