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