지난게시글에 이어 이번에는 HTML 파일에 <Script> 코드를 추가하여
http://localhost:{port}/lotto 로 접속을 했을때 lotto 페이지가 보여지고, rapple 버튼을 클릭 했을 때 페이지 재 로딩 없이 로또번호가 추첨되며, clear 버튼을 클릭하면 추첨된 번호가 전부 삭제되게 변경해 보겠습니다.
<head> <script> var lottoColors = ["orange", "blue", "red", "black", "green"]; var lottoBalls = []; for (var i = 1; i <= 45; i++) lottoBalls.push(i); var lottoLineCount = 0; function lotto_add() { shuffle(lottoBalls); var balls = lottoBalls.slice(0, 6); balls.sort((a, b) => a - b); var boxElem = document.getElementById("lottoBox"); var lineElem = document.createElement("div"); lineElem.className = "lotto-line" + ((++lottoLineCount % 5 == 0) ? " lotto-line-5th" : ""); for (var n of balls) { var ballElem = document.createElement("div"); ballElem.className = "lotto-ball"; ballElem.style.backgroundColor = lottoColors[Math.floor((n - 1) / 10)]; var numElem = document.createElement("div"); numElem.className = "lotto-number"; numElem.innerHTML = n; ballElem.appendChild(numElem); lineElem.appendChild(ballElem); } boxElem.appendChild(lineElem); } function lotto_clear() { document.getElementById("lottoBox").innerHTML = ""; lottoLineCount = 0; } function randInt(a, b) { return Math.floor(Math.random() * (b - a + 1)) + a; } function shuffle(ar) { for (var i = ar.length - 1; i > 0; i--) { var r = randInt(0, i); var temp = ar[i]; ar[i] = ar[r]; ar[r] = temp; } } </script> <style> .lotto-box { margin: 10px 0; padding: 3px; background: beige; min-height: 50px; } .lotto-line { padding: 5px; border-bottom: 1px solid lightgray; } .lotto-line-5th { border-bottom: 2px solid gray; } .lotto-line:last-child { border: none; } .lotto-ball { display: inline-block; position: relative; width: 40px; height: 40px; border-radius: 50%; vertical-align: top; margin-right: 5px; } .lotto-number { font-size: 20px; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; } .lotto-btn { padding: 5px 12px; } </style> </head> <div style="display:flex; justify-content:space-between;"> <input id="lotto_add" type="button" value="rapple!" onclick="lotto_add();"> <input id="lotto_clear" type="button" value="clear" onclick="lotto_clear();"> </div> <div class="lotto-box" id="lottoBox"></div>
무사히 lotto 페이지에 접근을 했습니다.
rapple! 버튼을 눌러주면 로또 번호가 추첨됩니다.
rapple! 버튼을 누를 때 마다 페이지 새로고침 없이 로또번호가 추첨됩니다.
clear 버튼을 누르면 추첨된 로또번호가 삭제됩니다.
