Question

我正在开发一个猜数字游戏。用户将猜测1-10之间的数字。在应用程序开始时，只会显示一个输入框，用户可以在其中写入数字和猜测按钮。

随着猜测的进行，盒子将增加其大小并向下移动。每一次猜测，盒子都会变大。

我已经想出了另一种方法，但它不起作用，因为我实际上希望它能够工作。有任何建议，请帮忙。

<!doctype html>
<head>
<title>Guess the Number!</title>
<meta charset="utf-8">

<style type="text/css">
#container{
border: thick double black;
padding: 1em;
width: 50%;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
}
}

</style>
</head>

<body>
<div id="container">
<fieldset>
<legend>Inputs</legend>
<label for="guess">Your Guess:</label>
<input type="text" id="guess" value="" />
<input type="button" onclick="yourGuess()" value="Guess" /> 
<input type="button" onclick="generateNumberToGuess(true)" value="New Game" /><br />
</fieldset>
<fieldset id="guesses" class="guesses">
<legend> Output </legend>
<textarea id="output" name="output" rows="10" style="width: 100%;"></textarea>
</fieldset>
</div>
<script type="text/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+")  Press New Game     to play again!";
} else if(guess > 10) {
        guesses.value = guesses.value + "\r" + "Your guess is too high. Guess a number between 1-10!   ("+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+")";
}

}



// 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()*11);
guesses.value = "Guess a number.\n";

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


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

</script>

</body>
</html>

Answer 1

好吧，我为你设计了它。但我建议花一些时间在更多的时间里从头开始＆＃34; CSS教程。 Codeacademy.com是一个很好的起点。我的建议是不要使用fieldset Fieldsets不应该像你使用它们一样用作容器。熟悉div布局。此外，你有一些东西形成的方式让人觉得它来自ASP.NET环境。我说的原因是你构建按钮的方式。 ASP.NET开发人员习惯使用大量内联样式，因为Web控件的处理方式。尽可能避免这种情况。

无论如何，转到此 DEMO 您会在其中找到样式代码。祝你好运

建议使用JavaScript，HTML

1 个答案: