Question

我需要创建一个使用document.getElementById接收值的数字猜谜游戏，并使用document.getElementByid将其输出到textarea。我需要创建一个用户可以猜测的随机数。用户将信息放入html的文本框中，并且当用户猜测它将把答案存储在输出文本区域中。第一个猜测将显示太高或太低，然后任何答案将显示更暖或更冷。我不确定要开始。这是html的示例。任何帮助将不胜感激。

  <form>
 <fieldset>
  <legend>Inputs</legend>
    <label for="guess">Your Guess:</label>
     <input type="text" id="guess" value="523" />
    <input type="button" onclick="yourGuess()" value="submit" /><br />
    <input type="button" onclick="" value="Show My Guesses" />  
    <input type="button" onclick="" value="New Game" /><br />
    <input id="cheat" type="checkbox" value="cheat" />
    <label for="cheat">Cheat</label>
</fieldset>
 <fieldset>

    <legend> Output </legend> <textarea id="output" name="output" rows="5"       style="width: 100%;">              
    </textarea>
  </fieldset>
</form>

JavaScript代码：

function yourGuess()
{
var guess1 = document.getElementById("guess").value;
var guess2 = 501;
var newGuess = Math.floor(guess2);
var n = 0;

if (newGuess < guess1) {
    yourReturn = "Your are too low!!!"
}
else {
    if (newGuess > guess1) {
        yourReturn = "You are too high!!!"
    }
    else {
        yourReturn = "Correct, You are the winner!!!"
    }       
}
}

Answer 1

这是我的理由：

http://jsfiddle.net/FB8Uh/

<fieldset>
 <legend>Inputs</legend>
 <label for="guess">Your Guess:</label>
 <input type="text" id="guess" value="523" />
 <input type="button" onclick="yourGuess()" value="submit" /><br />
 <input type="button" onclick="" value="Show My Guesses" />  
 <input type="button" onclick="" value="New Game" /><br />
 <input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" />
 <label for="cheat">Cheat</label>
 <div id="cheatShow" style="display: none;">
  <input id="numberToGuess" type="text" />
  <label for="numberToGuess">Number to guess</label>
 </div>
</fieldset>
<fieldset>
 <legend> Output </legend>
 <textarea id="output" name="output" rows="5" style="width: 100%;"></textarea>
</fieldset>

Javascript：

<script type="text/javascript">
function yourGuess() {
    guess = document.getElementById("guess").value;
    guesses = document.getElementById("output");

    if (guess == numToGuess) {
        guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")";
    } else if (guess > numToGuess) {
        guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")";
    } else {
        guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")";
    }
}

function showNumberToGuess() {
    if (document.getElementById('cheat').checked) {
        document.getElementById('numberToGuess').value = numToGuess;
        document.getElementById('cheatShow').style.display = 'inline';
    } else {
        document.getElementById('numberToGuess').value = '';
        document.getElementById('cheatShow').style.display = 'none';
    }
}

var numToGuess = Math.floor(Math.random()*500);
</script>

<强>已更新

http://jsfiddle.net/FB8Uh/4/

HTML：

<fieldset>
 <legend>Inputs</legend>
 <label for="guess">Your Guess:</label>
 <input type="text" id="guess" value="523" />
 <input type="button" onclick="yourGuess()" value="submit" /><br />
 <input type="button" id="showguesses" onclick="showGuesses()" value="Show My Guesses" />  
 <input type="button" onclick="generateNumberToGuess(true)" value="New Game" /><br />
 <input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" />
 <label for="cheat">Cheat</label>
 <div id="cheatShow" style="display: none;">
  <input id="numberToGuess" type="text" />
  <label for="numberToGuess">Number to guess</label>
 </div>
</fieldset>
<fieldset id="guesses" class="guesses">
 <legend> Output </legend>
 <textarea id="output" name="output" rows="5" style="width: 100%;"></textarea>
</fieldset>

Javascript：

function yourGuess() {
    // You can store references to the value and the
    // guesses textarea in local function variables.
    var guess = document.getElementById("guess").value;
    var guesses = document.getElementById("output");

    // First, if the guess is the same, just show the answer.
    // Append onto the textarea the result.
    if (guess == numToGuess) {
        guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")";
    } else if (guess > numToGuess) {
        guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")";
    } else {
        guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")";
    }
}

function showNumberToGuess() {
    // Show the randomly generated number if the onclick event
    // fires and the checkbox is check; otherwise, remove the
    // number and hide using display: none;.
    if (document.getElementById('cheat').checked) {
        document.getElementById('numberToGuess').value = numToGuess;
        document.getElementById('cheatShow').style.display = 'inline';
    } else {
        document.getElementById('numberToGuess').value = '';
        document.getElementById('cheatShow').style.display = 'none';
    }
}

// Randomly generate a number
function generateNumberToGuess(confirmIt) {
    var guesses = document.getElementById("output");

    // First, confirm this is what we want if the confirmIt
    // argument was passed.
    if (confirmIt && !confirm('Restart game with new number?')) {
        return;
    }

    guesses.value = '';
    numToGuess = Math.floor(Math.random()*500);
    guesses.value = "New number generated.\n";

    // Don't forget to hide the new number.
    document.getElementById('numberToGuess').value = '';
    document.getElementById('cheatShow').style.display = 'none';
}

function showGuesses(){
    var guesses = document.getElementById('guesses');
    var btn = document.getElementById('showguesses');

    if (guesses.style.display != 'block') {
        guesses.style.display = 'block';
        btn.value = 'Hide My Guesses';
    } else {
        guesses.style.display = 'none';
        btn.value = 'Show My Guesses';
    }
}

window.onload = function(){
    generateNumberToGuess();
}

Answer 2

http://nicksjavascript.blogspot.com/2013/12/javascript-tutorial-8-guess-number.html

这是一个关于猜测我的号码应用的简单教程

如何在JavaScript中创建一个数字猜谜游戏

2 个答案: