자바스크립트 JSON 마무리 문제(UPGRADE)

자바스크립트 JSON 마무리 문제(UPGRADE)

 

참고

• https://dongjin6539.tistory.com/78

 

길라잡이

• 명언뿐만 아니라 이미지도 10초에 한번씩 바꿔주세요.

 

 

 

JAVACRIPT

<script>
    function imgLoad(){
        let bgImg = document.querySelector(".bgImg");
        bgImg.src = `https://source.unsplash.com/random/?sky&t=${new Date().getTime()}`;
    }
    imgLoad();

    function nextQuote(){
        fetch("json/dummy01.json")
        .then(res => res.json())
        .then(items => {
            // console.log(items); // 문제의 데이터 불러오기
            const random = Math.floor(Math.random()*30); // 1~29까지의 수 구하기
            // console.log(random);

            const quote = result.querySelector(".quote");
            const author = result.querySelector(".author");

            quote.innerHTML = items.quotes[random].quote;
            author.innerHTML = `-${items.quotes[random].author}`;
        })
        .catch((err) => console.log(err));
    };
    nextQuote();

    setInterval(imgLoad, 10000);    
    setInterval(nextQuote, 10000);
</script>

자바스크립트 구성

• https://dongjin6539.tistory.com/78에서 추가로 작업을 했습니다.
• unsplash 페이지에서 사진을 무료로 가져올 수 있습니다.(https://unsplash.com/ko)
• 함수 imgLoad를 만들어서 실행해줍니다.
• 코드의 이미지 부분을 선택자로 만들어줍니다.
• unsplash API에서 이미지를 random으로 가져올 수 있는 소스가 있습니다.
• img 요소의 src 속성 값을 변경합니다. 이 때, 새로운 이미지를 불러오기 위해 랜덤한 쿼리 파라미터를 추가해서 속성값을 변경하는 코드를 입력해줍니다.
• imgLoad( );를 입력해서 함수를 실행시켜주고 setInterval( )함수를 사용해서 10초마다 실행되게 해줍니다.

 

참고

Date( )

Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성합니다.

사용 방법 : new Date( ) 

 

getTime( )

getTime( ) 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.