Play a Random Number Guessing Game - HTML & JavaScript - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Random Number Game</title>
    <style>
      body {
        font-family: sans-serif;
        background-color: #e6e6e6;
      }
<pre><code>  .container {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .game {
    background-color: #fff;
    width: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  input {
    font-size: 16px;
    padding: 5px;
    margin-right: 10px;
    border: 1px solid #ccc;
  }

  button {
    font-size: 16px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
  }
&lt;/style&gt;
</code></pre>
  </head>
  <body>
    <div class='container'>
      <h1>Random Number Game</h1>
      <div class='game'>
        <h2>Try to guess the random number!</h2>
        <p>Enter a number between 1 and 10:</p>
        <input type='text' id='inputNumber' />
        <button id='submitButton'>Submit</button>
      </div>
    </div>
<pre><code>&lt;script&gt;
  // Get the input field, submit button and the hidden random number
  const inputNumber = document.getElementById('inputNumber');
  const submitButton = document.getElementById('submitButton');
  const randomNumber = Math.floor(Math.random() * 10) + 1;

  // Add an event listener to the submit button
  submitButton.addEventListener('click', function(e) {
    // Get the value from the input field
    const guessedNumber = parseInt(inputNumber.value);

    // Check if the entered value is equal to the random number
    if (guessedNumber === randomNumber) {
      alert('You guessed the number correctly!');
    } else {
      alert('Sorry, try again!');
    }
  });
&lt;/script&gt;
</code></pre>
  </body>
</html>