728x90
5초마다 바뀌는 명언예제에서 랜덤배경추가
코드블럭
<!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
});
};
const BgImage = () => {
const backgroundImageUrl = `https://source.unsplash.com/random/?nature&t=${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${backgroundImageUrl})`;
}
dataQuestion()
BgImage();
setInterval(dataQuestion,5000)
setInterval(BgImage, 5000);
</script>
</html>보충설명
무작위로 선택된 자연 사진을 HTML 문서의 배경 이미지로 설정하고, 일정한 시간 간격으로 배경 이미지를 변경하는 기능을 구현하고 있습니다.
BgImage 함수는 https://source.unsplash.com/random/?nature URL을 사용하여 무작위로 선택된 자연 사진을 가져온 뒤, 이를 backgroundImageUrl 변수에 저장합니다.
new Date().getTime() 함수를 사용하여 *캐싱을 방지하기 위해 URL에 시간 정보를 추가합니다.
document.body.style.backgroundImage 속성을 사용하여 HTML 문서의 배경 이미지를 backgroundImageUrl 변수의 값으로 설정합니다.
BgImage() 함수를 한 번 호출하여 초기 배경 이미지를 설정합니다. 그리고 setInterval() 함수를 사용하여 BgImage() 함수를 5초마다 반복 실행하도록 설정합니다. 페이지를 새로 고침하지 않고도 일정한 시간 간격으로 배경 이미지가 변경되도록 구현합니다.
*캐싱
명령어와 데이터를 캐시 기억 장치 또는 디스크 캐시에 일시적으로 저장하는 것. 캐싱은 중앙 처리 장치(CPU)가 명령어와 데이터를 주기억 장치 또는 디스크로부터 읽어 오거나 데이터를 주기억 장치 또는 디스크에 기록하는 것보다 몇 배 빠른 속도 또는 CPU의 속도에 가깝게 단축시킴으로써 컴퓨터의 성능을 향상시키기 위한 방법