javascript day5

김영목·2021년 10월 4일
0

이번에는 화면 하단에 나오는 오늘의 명언을 어떻게 출하는지 알아보자.
이번 작업에서 중요한 점은 해당 명언들이 랜덤하게 나와야 하는 점이다.

<div class='quotes'>
  <span></span>
  <span></span>
</div>
위처럼 텅빈 span을 만든다.
const quotes = [~~~~]

const myQuotes = document.querySelector('.quotes');

const mySpan =  document.querySelector('.quotes span:first-child');

const mySpanAnother = document.querySelector('.quotes span:last-child');

const todayQuotes = quotes[Math.floor(Math.random()*quotes.length)];

mySpan.innerText = todayQuotes.quote;
mySpanAnother = todayQuotes.author;

위와 비슷한 기능을 가지고 일정 시간마다 배경이 바뀌는 효과를 넣어보자.

const backGround = ['1.jpeg', '2.jpeg', '3.jpeg','4.jpeg'];

const bgImage = document.creageElement('img');

function changeBody() {
	const backImage = backGround[Math.floor(Math.random()*backGround.length];
        bgImage.src = '${backImage}';
        document.appendchild(bgImage);                        
};

setIterval(changeBody, 20000);	
profile
안녕하세요 김영목입니다.

0개의 댓글