Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

기록

자바스크립트 랜덤명언+랜덤이미지넣기 본문

JAVASCRIPT&JQUERY

자바스크립트 랜덤명언+랜덤이미지넣기

9400 2023. 9. 22. 15:29
<!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에 붙임

 

랜덤출력성공

Comments