관련함수
Math.random
>> 0이상 1미만 랜덤 실수 제공한다.
Math.random()
>>반올림 처리
Math.ceil()
>>올림
Math.floor()
>>내림
랜덤 명언 생성
quotes.js
//quotes array
const quotes = [
{
quote: 'I never dreamed about success, I worked for it',
author: 'Estee Lauder'
},
{
quote: 'Do not try to be original, just try to be good.',
author: 'Paul Rand'
},
{
quote: 'Do not be afraid to give up the good to go for the great',
author: 'John D. Rockefeller'
},
{
quote: 'If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.',
author: 'Martin Luther King Jr.'
},
{
quote: 'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.',
author: 'Thomas Edison'
},
{
quote: 'The fastest way to change yourself is to hang out with people who are already the way you want to be',
author: 'REid Hoffman'
},
{
quote: 'Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations',
author: 'Tim O Reilly'
},
{
quote: 'Some people dream of success, while other people get up every morning and make it happen',
author: 'Wayne Huizenga'
},
{
quote: 'The only thing worse than starting something and falling.. is not starting something',
author: 'SEth Godin'
},
{
quote: 'If you really want to do something, you will find a way. If you do not, you will find an excuse.',
author: 'Jim Rohn'
},
];
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
//
const todayQuote = quotes[Math.round(Math.random() * quotes.length)];
//console.log(quotes[Math.round(Math.random() * quotes.length)]);
quote.innerText = todayQuote.quote;
author.innerText = todayQuote.author;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Momentom</title>
</head>
<body>
<form class="hidden" id="login-form">
<input type="text" required maxlength="15" placeholder="what is your name?"/>
<button>Log In</button>
</form>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting"></h1>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="greeting.js"></script>
<script src="clock.js"></script>
<script src="quotes.js"></script>
<script src="background.js"></script>
</body>
</html>
배경생성 (jpg 파일 경로 설정 주의!)
background.js
const images = [ "0.jpg", "1.jpg", "2.jpg" ];
const chosenImage = images[Math.round(Math.random() * images.length)];
const bgImage = document.createElement("img");
//console.log(bgImage);
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);document.createElement()
>> 매개변수에 들어갈 요소를 생성
bgimage.src = `img/${chosenImage}`
벡틱
document.body.appendChile(bgImage);
body 부분 맨뒤에 추가한다.
document.body.prependChile(bgImage);
boby 앞 부분에 추가한다.
참조 노마드 코더
'JS > 몰라JS' 카테고리의 다른 글
| [javaScript] todoList(2) (1) | 2023.06.17 |
|---|---|
| [javaScript] todoList(1) (0) | 2023.06.16 |
| [javaScipt] 시계 만들기(clock) (0) | 2023.06.08 |
| [javascript] Login 처리 (0) | 2023.06.05 |
| [javaScript] 브라우저와의 연동 사용법 (0) | 2023.06.04 |
