Python lotto, calculator Program [3]

21251 단어 FlaskvscodepythonanacondajqueryFlask

지난게시글에 이어 이번에는 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 버튼을 누르면 추첨된 로또번호가 삭제됩니다.

[React Native] ToDo App 만들기 - 화면 전환 디자인
[JAVA](Swing) 입력 받고 HTTP 요청 보내기 (GET, POST)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage