728x90
반응형
🟰위와 같이 새로고침을 할 때 자동으로 다음 인용구가 랜덤으로 나오도록 만들어보는 연습을 하려고 한다.
⏬준비할 html코드(id가 quote인 div태그안의 span태그에 인용구를 넣으려고 한다)<div id="quote"> <span></span> <span></span> </div>
⏬JS코드 ( quotes값에 넣고자 하는 인용구와 text를 넣어준다.)
🔆quote안의 두개의 span 을 first-child, last-child를 통해 불러온다
🔆Math.random()을 통해 랜덤정수를 가져온다.(quotes.length를 곱해서 해당 길이만큼 범위를 확장)
🔆Math.floor를 통해 소수점을 버린다. Math.random은 double타입으로 나오기 때문
🔆그렇게 생성된 랜덤 인덱스에 해당하는 quote와 text를 각 span에 넣어주기만 하면 끝!const quotes = [ { quote : "죽고자 하면 살것이다.", text : "이순신", }, { quote : "백문이 불여일문", text : "사자성어", }, { quote : "사랑은 은하수 다방에서 만나", text : "10cm", }, { quote : "이건 사랑이 아냐 이건 운명이 아냐 그냥 정이라고 하자", text : "Big Naughty", }, { quote : "총 맞은 것처럼", text : "백지영", } ] const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)]; quote.innerText = todaysQuote.quote; author.innerText = todaysQuote.text; /* Math.random은 0~1사이의 랜덤 실수를 제공한다. */ /** Math.round()는 반올림 함수 * Math.ceil()은 올림 함수 * Math.floor()은 내림 함수 */
728x90
반응형
'JavaScript' 카테고리의 다른 글
JavaScript - toDoList(할일 목록 만들기) (96) | 2023.08.21 |
---|---|
JavaScript 실시간 시간 출력하기 (0) | 2023.08.09 |
JavaScript07 - sort함수를 통한 오름차순,내림차순 정렬 (0) | 2023.08.01 |
JavaScript06 - switch를 사용한 이동효과 만들기 (0) | 2023.08.01 |
JavaScript05 - 조건몬(if) (예시 포함) (0) | 2023.07.31 |