기록
자바스크립트 랜덤명언+랜덤이미지넣기 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Link rel="stylesheet" href="style.css"></Link>
<title>Momentum</title>
</head>
<body>
<h2 id="clock">00:00:00</h2>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/app.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>
quotes.js (명언랜덤)
const quotes = [
{
quote : "명언1",
author : "넹1"
},
{
quote : "명언2",
author : "넹2"
},
{
quote : "명언3",
author : "넹3"
},
{
quote : "명언4",
author : "넹4"
},
{
quote : "명언5",
author : "넹5"
},
{
quote : "명언6",
author : "넹6"
},
{
quote : "명언7",
author : "넹7"
},
{
quote : "명언8",
author : "넹8"
},
{
quote : "명언9",
author : "넹9"
},
{
quote : "명언10",
author : "넹10"
},
]
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;
background.js 사진랜덤
const image = ["1.jpg","2.jpg","3.jpg"];
const chosenImage = image[Math.floor(Math.random() * image.length)];
const bgImage = document.createElement("img") //img 태그를 만듦
bgImage.src = `img/${chosenImage}`; //src설정
document.body.appendChild(bgImage); //body에 붙임

'JAVASCRIPT&JQUERY' 카테고리의 다른 글
조건문 truthy, falsy값 구분 (0) | 2024.02.22 |
---|---|
자바스크립트 TODOLIST 만들기 + 삭제 (0) | 2023.09.25 |
자바스크립트 시계기능만들기 setInterval, setTimeout, padStart (0) | 2023.09.21 |
자바스크립트 토글 (0) | 2023.09.20 |
자바스크립트 addEventListener로 글자색변경 (0) | 2023.09.20 |