초보 개발자의 일기

JS quote & background 본문

Frontend practice/java script

JS quote & background

판다꼬마 2022. 5. 3. 23:14
728x90

 

Math.floor는 소수점을 버리는 것(버림)

1.999999999  => 1
Math.ceil은 소수점을 올리는 것(올림)

1.0100111111111 =>2
Math.round는 소수점을 반올림하는 것이다.

1.499999 까지는 1로

1.5부터는 2로

 

 

 

const quotes로 배열을 선언한다.

const quotes= [  {    quote:~~~~,    author:~~~  },...

 

];

 

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.author;

이렇게 코드를 작성하면 화면에 랜덤 한 명언이 출력되게 된다.


const images = ["0.jpg", "1.jpg", "2.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);
const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

이 3줄이 의미하는 것은

내가 직접 HTML 코드에 <img scr=""> 코드를 작성하는 것과 같다.

 

 

document.body.appendchild()를 사용해 코딩을 하면

html에 사진을 뒤에 추가할 수 있다. JS에서 코딩을 해서 직접 HTMl에 넣는 방법이다.

 

appendchild 대신 prepend를 사용하면 사진을 앞에 추가한다.

728x90

'Frontend practice > java script' 카테고리의 다른 글

JS To Do list 2  (0) 2022.05.04
JS ToDo List 만들기  (0) 2022.05.04
JS clock 만들기  (0) 2022.05.03
JS form  (0) 2022.05.03
JS login 창 만들기  (0) 2022.05.02