모각코+/Javascript
[모각코+] 자바스크립트 12월과정 8일차
Jshrewd
2021. 12. 29. 21:01
728x90
https://cafe.naver.com/codeuniv/55646?boardType=L
[모각코+ 출석 인증] 8일차 - 웹 자바스크립트 12월 과정 A조
대한민국 모임의 시작, 네이버 카페
cafe.naver.com
오늘의 문제는 버튼 클릭 시 마다 글자가 추가되는 전광판(?) 만들기였습니다.
제가 생각하는 전광판은 글자가 자동으로 흘러가는 그런 ...? 전광판이였는데 좀 다르긴하네요 ㅎㅎㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전광판</title>
<link rel="stylesheet" href="./day8.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Single+Day&display=swap');
</style>
</head>
<body>
<div class="contain">
<div class="button">
<button id = "btn1" onclick=startStr()>메세지</button>
<button id = "btn2" onclick=resetStr()>초기화</button>
</div>
<div class="text">
<p id="insertText"></p>
</div>
</div>
<script src="./day8.js"></script>
</body>
</html>body {
background-color: white
}
.contain {
margin: 100px;
text-align: center;
}
.text {
font-family: 'Black Han Sans', sans-serif;
font-family: 'Single Day', cursive;
font-size: 30px;
font-weight: bolder;
}
button {
position: relative;
border: none;
display: inline-block;
padding: 15px 30px;
border-radius: 15px;
font-family: "paybooc-Light", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
background: linear-gradient(-45deg, #33ccff 0%, #ff99cc 100%);
color: white;
}let pos = 0;
let msg = document.getElementById("insertText")
const str = "2021년 고생하셨어요♥";
const fromStr = Array.from(str);
function showState(){
alert("메세지 출력이 완료되었습니다.\n\n다시 보기를 원하시면\n초기화 후 출력해주세요.");
}
function startStr(){
if(fromStr[pos]!=null){
msg.innerHTML += fromStr[pos];
pos++;
} else {
showState();
}
}
function clearStr(){
pos = 0;
}
function resetStr(){
msg.innerHTML='';
clearStr();
}
728x90