Limpahan kandungan dalam tetingkap menghalang penatalan dan menyembunyikan kandungan baharu

Saya sedang membina program sistem rolet (ini lebih untuk menghalang saya daripada meletakkan pertaruhan daripada meletakkan pertaruhan!) dan saya hanya melakukan rangka kerja asas, tetapi sudah menghadapi masalah dengan tetingkap utama "#results" tidak menatal penuh mendapat keputusan. Penatalan perlu mengikut baris kandungan terkini, jadi kandungan terkini yang dikembalikan daripada input dalam kotak modal sentiasa ditunjukkan di bahagian bawah. Saya menghabiskan berjam-jam meneliti banyak kemungkinan penyelesaian tetapi tidak berjaya.

Ini kodnya: (Saya minta maaf atas kepanjangan skrip penuh)

<!DOCTYPE html>
    <html>
    <body>
   
    <div id="results">
        </div>

  
  
    <div id="modal">
    <div id="modal-content">
      <p>Select a number between 0 and 36:</p>
      <div id="numberButtons"></div>
      <button id="close-button" onclick="closeModal()">Close</button>
    </div>
    </div>
    </div>
    <style>
  
  
    /* The modal background */
    #modal {
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* The modal content */
    #modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    width: 18%;
    border: 3px solid black;
  
    }




    /* The close button */
    #close-button {
      display: block;
      margin: 0 auto;
    }

    #numberButtons button {
      color: white;
      width: 50px;
      height: 50px;
      font-size:30px;
    font-weight:600;
    }
    
    #modal.inactive{
    opacity: 0.2;
    }

    </style>
    <script>
  
    var bankRoll = parseFloat(prompt("Please enter your starting bankroll:"));
    if(isNaN(bankRoll)){
    bankRoll = parseFloat(prompt("Invalid input. Please enter a valid number for your starting bankroll:"));
    }
  

    bankRoll = bankRoll.toFixed(2);
  
    var spinNumber=0;
    
    
    
    var backline="";
    
    
    var isDragging = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    const modalContent = document.querySelector("#modal-content");

    modalContent.addEventListener("mousedown", dragStart);
    modalContent.addEventListener("mouseup", dragEnd);
    modalContent.addEventListener("mousemove", drag);

    function dragStart(e) {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;

      if (e.target === modalContent) {
        isDragging = true;
      }
    }

    let inactivityTimeout;

    function dragEnd(e) {
    initialX = currentX;
    initialY = currentY;

    isDragging = false;
    clearTimeout(inactivityTimeout);
    inactivityTimeout = setTimeout(() => {
    modal.classList.add("inactive")
    }, 15000)
    }


    function drag(e) {
    if (e.buttons === 1) {
    e.preventDefault();
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;

    xOffset = currentX;
    yOffset = currentY;

    setTranslate(currentX, currentY, modalContent);
    clearTimeout(inactivityTimeout);
    modal.classList.remove("inactive")
    }
    }



    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

    function getNumberType(number) {
    
      if (number === 0) {
        return "green";
      } else if (number % 2 === 0) {
        return "even";
      } else {
        return "odd";
      }
    }

    function roulette(number) {
      // Determine the color of the number
      var color;
      if (number === 0) {
        color = "Green";
      } else if (number === 1 || number === 3 || number === 5 || number === 7 || number === 9 || number ===        12 || number === 14 || number === 16 || number === 18 || number === 19 || number === 21 || number === 23 || number === 25 || number === 27 || number === 30 || number === 32 || number === 34 || number === 36) {
        color = "Red";
      } else {
        color = "Black";
      }

      // Map the color names to CSS color values
      if (color === "Green") {
        return "rgb(0, 128, 0)";
      } else if (color === "Red") {
        return "rgb(255, 0, 0)";
      } else {
        return "rgb(0, 0, 0)";
      }
    }


    function backgroundline() {
       if (spinNumber % 2 === 0) {
        backline="#D3D3D3"
      } else {
       backline="#E5E4E2";
      }
    }
    

    

    function spin(number) {
    // Determine the color of the number
    var color = roulette(number);
    spinNumber= spinNumber+1;
 
    bankRoll=bankRoll-10;
    backgroundline();
    // Display the result
    var resultsDiv = document.getElementById("results");
    var resultHTML = `${number}`;
  
    resultHTML = `<div style="padding:10px 0; background: ${backline};vertical-align:middle;margin-bottom:-      20px;">
  
    <div style="padding:5px; display: inline-block; background: yellow; color:black;vertical-align:middle;   width:30px; text-align:right;">${spinNumber}</div>
  
    <div style="margin: 0 10px; display:inline-block; width: 70px; text-align:center;vertical-align:middle">£ ${bankRoll}</div>
  
   <div style="color: white; padding: 5px; display: inline-block; width:30px; padding-top:15px;vertical-align:middle; font-size: 25px; font-weight:600; height:30px; text-align:center; background-color: ${color}; ">${resultHTML}</div>
  
   </div>
  
   <br style="height:0px;"/>`;
 
   resultsDiv.innerHTML += resultHTML;
    
   }
   // Set up the buttons
   for (let i = 0; i <= 36; i++) {
   let button = document.createElement("button");
   button.innerHTML = i;
   button.style.backgroundColor = roulette(i);
   button.addEventListener("click", function() {
     spin(i);
   });
   document.getElementById("numberButtons").appendChild(button);
   }

   function closeModal() {
   // Get the modal element
   var modal = document.getElementById("modal");

   // Remove the modal element from the DOM
   modal.remove();
   }
   </script>
   </body>
   </html>

Saya telah mencuba banyak penyelesaian pada Stack Overflow dan kawasan lain di internet yang saya fikir mungkin berkesan, tetapi nampaknya tidak mahu.

P粉106715703227 hari yang lalu407

Limpahan kandungan dalam tetingkap menghalang penatalan dan menyembunyikan kandungan baharu

membalas semua(1)saya akan balas