명언 자동 반복 사이트 만들기 2

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

<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>숙제 1</title>
    <link rel="stylesheet" href="css/quotes.css">
    <style>
        body{
            background-image: url("https://source.unsplash.com/random/?dog");
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-position: center;
            background-size: cover;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 40px;
            color: #ff5191;
        }
    </style>
</head>

"https://source.unsplash.com/random/?dog"

URL을 통해, 배경 이미지가 랜덤으로 강아지 사진이 선택됩니다.

<body>
<div id="result">
    <div class="quote"></div>
    <div class="author"></div>
</div>
</body>
<script>
    const updateQuote = () => {
        fetch("json/work.json")
        .then(res => res.json())
        .then(data => {
            const result = document.querySelector("#result");
            const random = Math.floor(Math.random() * 30); 
            result.querySelector(".quote").innerHTML = data.quotes[random].quote;
            result.querySelector(".author").innerHTML = ` - ${data.quotes[random].author}`;
        })
        .catch(error => console.log(error));
    }

이 코드는 명언을 랜덤으로 가져와 화면에 보여주는 기능을 가진 함수 updataQuote를 정의한 함수입니다.

json파일에서 데이터를 가져옵니다.

then 메서드를 통해 json 형식으로 변환 된 데이터를 처리합니다. 이 때 data는 json 형식으로 변환 된 데이터 입니다.

Math.floor를 사용해 0부터 29까지 랜덤한 수를 생성합니다.

data.quotes[random].quote와 data.quotes[random].author를 사용해 명언과 저자를 가져옵니다.

function updateBackground() {
const imageUrl = `https://source.unsplash.com/random/?dog&t=${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${imageUrl})`;
}
const updateQuoteAndBackground = () => {
updateQuote();
setTimeout(updateBackground, 5000);
}
updateQuoteAndBackground();
setInterval(updateQuoteAndBackground, 10000);

다음은 백그라운드 이미지를 명언과 함께 바뀌도록 작업해 주는 스크립트 입니다.

함수를 사용한 다음 ,unsplash에서 개 이미지를 가져올 수 있도록 링크를 걸어두었습니다.

화살표 함수를 사용해 5초간 이미지가 자동으로 변경될 수 있게 작업해 주면 5초마다 새로운 랜덤한 강아지 이미지가 배경으로 설정 됩니다.

updateQuoteAndBackground 함수는 updateQuote 함수를 먼저 실행하고 setTimeout을 사용해 5초 후 updateBackground 함수를 실행합니다.

마지막으로, updateQuoteAndBackground 함수를 10초마다 실행하기 위해 setInterval 함수를 사용합니다.

따라서 해당 코드를 HTML 파일에 추가하면 5초마다 새로운 강아지 이미지가 배경으로 설정되면서 10초마다 새로운 명언이 화면에 보여집니다.

'javascript' 카테고리의 다른 글

자바스크립트 문자열 객체 정리 (9)	2023.04.23
패럴렉스 효과 1 (포트폴리오 참고용) (17)	2023.04.18
슬라이드이펙트 일곱 번째 (11)	2023.04.16
슬라이드이펙트 여섯 번째 (11)	2023.04.14
슬라이드이펙트 다섯 번째 (12)	2023.04.12

xoouxa