Python lotto, calculator Program [3]

21400 ワード
Flask vscode python anaconda jquery テキストリンク
続いて最後の投稿、続いて<Script>コードをHTMLファイルに追加します.
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ボタンをクリックすると、抽選の宝くじ番号が削除されます.
整列挿入
複数のデータをcookieにシーケンス化して取り出します