그 전에 함수 하나를 먼저 보고 가자면
const todaysQuote = (quotes[Math.floor(Math.random()*quotes.length)]); // Math.random -> 이 기능으로 내가 나열한 명 언을 랜덤으로 보여준다.

위에 지정한 명언(두개밖에 안넣은 상태)
인덱스파일에 지정한 span첫번째 두번째 각각 명언과 작가의 이름이 들어갈 부분을 정해주고
Math.fllor 기능은 저 랜덤값이 1.203203 이런식으로 표현되는것을 1로 바꿔주는 기능 내려주는 기능이다. 숫자를 정리해서
length로 내가 지정한 명언의 숫자만큼 랜덤값에 곱해준다. 왜냐면 랜덤값은 0.~1에서 랜덤값이 기본이라 저렇게 해줘야한다.
2. 백그라운드

이미지 파일을 미리 추가해 둔뒤에 이름을 똑같이 해서 지정해 준다.
그리고 document.createEleme 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. 즉 js 기능을 html에 포함시켜 사진이미지가 html 화면에 보이게 해준다.
이미지 소스 정의를 내려주고 아까 정의한 랜덤값 chosenImage
그리고 appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다
인덱스 바디 밑에 이미지를 임의로 추가해줌으로서 마무리.
'하찮은 개발일지' 카테고리의 다른 글
css 배경이미지 설정 (0) | 2022.09.25 |
---|---|
22.07.18 날씨 api 사용 (0) | 2022.07.18 |
2022.07.18 버튼을 눌러 삭제하는 기능 (0) | 2022.07.18 |
2022.07.14 clock. (0) | 2022.07.14 |
2022.07.11 String (0) | 2022.07.11 |