시간이 지날때마다 명언이 바뀌게끔 설정
<!DOCTYPE html>
<html lang="kr">
<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="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./style/modal.css" />
<script>
var texts = [
"계획하지 않는 것은 실패를 계획하는 것과 마찬가지다.",
"성공은 영원하지 않고, 실패는 치명적이지 않다.",
"성공이란 넘어지는 횟수보다 한 번 더 일어서는 것이다.",
"할 수 있다고 믿는 사람은 결국 그렇게 된다.",
"가장 중요한 사실은 당신이 할 수 있다는 것을 아는 것이다.",
];
var currentIndex = 0;
function changeText() {
var textElement = document.getElementById("text");
textElement.textContent = texts[currentIndex];
currentIndex = (currentIndex + 1) % texts.length;
}
setInterval(changeText, 3000);
</script>
<!-- reset css -->
<title>작심 하루</title>
</head>
<body>
<template id="modal_template">
<div class="backdrop"></div>
<div class="jaksim_today_modal">
<div class="jaksim_today_modal_close_bth">x</div>
<form action="" class="jaksim_today_modal_form">
<div class="jaksim_today_modal_title">
<h3>작심 추가하기</h3>
</div>
<div class="jaksim_today_modal_color_check">
<div class="color_check_btn water">물주기</div>
<div class="color_check_btn sun">햇빛</div>
<div class="color_check_btn pill">영양제</div>
</div>
<div class="jaksim_today_modal_input">
<input type="text" placeholder="오늘의 작심을 입력해주세요." />
</div>
<div class="jaksim_today_modal_submit_btn">
<button>추가</button>
</div>
</form>
</div>
</template>
<!-- 모달창 영역 -->
<div class="header">
<h1>작심 하루</h1>
<div class="login"></div>
</div>
<div class="todayTask">
<h2><br />작심 Today</h2>
<button class="btn">추가</button>
</div>
<div class="oftenTask">
<h2><br />자주쓰는 작심's</h2>
</div>
<div class="wiseTalk">
<div class="todayScore">
<h2>오늘의 명언</h2>
</div><br /><br />
<h3 id="text" style="text-align: center;">성공이란 넘어지는 횟수보다 한 번 더 일어서는 것이다.</h3>
</div>
<div class="todayState">
<div class="todayMood">
<h2>오늘의 기분</h2>
<div class="emoji">😁 😐 🙁 😡</div>
</div>
<div class="todayScore">
<h2>오늘의 점수</h2>
<div class="score">85점</div>
</div>
<div class="diary">
<h2>오늘의 일기</h2>
<div class="diaryTxt">
<input type="text" name="diarytxt" id="diaryTxt" />
</div>
</div>
</div>
<div class="plant"></div>
<div class="footer"></div>
</body>
</html>
위처럼 오늘의 명언 text 부분이 시간이 지나면 바뀐다.