Simple HTML Guessing Game - Code & Tutorial - 常规

<html>
<head>
    <title>Guess the Number</title>
    <style type="text/css">
        #guessForm {
            background-color: #bbb;
            padding: 5px 10px;
            font-family: sans-serif;
            font-weight: bold;
        }
<pre><code>    #guessForm input {
        font-size: 1.2em;
        padding: 4px;
    }

    #guessForm button {
        font-size: 1.2em;
        padding: 6px;
        background-color: #ccc;
        border: 0;
    }

    #result {
        font-family: sans-serif;
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="container">
        <h1>Guess the Number</h1>
        <p>I'm thinking of a number between 1 and 10. Can you guess it?</p>
<pre><code>    &lt;form id=&quot;guessForm&quot;&gt;
        &lt;input type=&quot;text&quot; name=&quot;guess&quot; /&gt;
        &lt;button type=&quot;submit&quot;&gt;Guess&lt;/button&gt;
    &lt;/form&gt;

    &lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
    const randomNumber = Math.floor(Math.random() * 10) + 1;
    const guessForm = document.getElementById('guessForm');
    const result = document.getElementById('result');

    guessForm.addEventListener('submit', e =&gt; {
        e.preventDefault();

        const guess = parseInt(guessForm.guess.value);

        if (guess === randomNumber) {
            result.textContent = 'You guessed it!';
        } else {
            result.textContent = 'Wrong! The number was ' + randomNumber;
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>