그 전에 함수 하나를 먼저 보고 가자면 

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

+ Recent posts