Fatal编程技术网

建议使用JavaScript、HTML

javascript html css input

建议使用JavaScript、HTML,javascript,html,css,input,Javascript,Html,Css,Input,我正在开发一个猜数字游戏。用户将猜测1-10之间的数字。在应用程序开始时，将只显示一个输入框，用户可以在其中写入一个数字和一个猜测按钮 像这样： 随着猜测的进行，盒子将增大其尺寸并向下移动。每猜一次，盒子都会更大 像这样： 我已经想出了另一种方法，但它没有工作，因为我真的希望它工作。有什么建议，请帮忙 <!doctype html> <head> <title>Guess the Number!</title> <meta charset="

我正在开发一个猜数字游戏。用户将猜测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>
好的，我为你做的。但我建议花些时间学习CSS的入门教程。Codeacademy.com是一个很好的起点。我的建议是不要使用字段集。字段集不应该像您使用它们的方式那样用作容器。熟悉div布局。另外，您将某些内容格式化的方式给人一种来自ASP.NET环境的感觉。我之所以这么说，是因为你设计了这些按钮。由于处理web控件的方式不同，ASP.NET开发人员有使用大量内联样式的坏习惯。尽量避免这种情况

无论如何，转到这里，你会在那里找到样式化的代码。祝你好运

但它没有发挥作用，因为我真的希望它发挥作用。。。。。那么你到底希望它如何工作呢？嗯，我不希望输出看起来像现在的样子，但就像我附上的图片一样。你是说你对样式不满意吗？是的，我的朋友，我只是不知道如何使它像我附上的图片一样工作，如何通过每次猜测扩展框…所有函数都工作正常，但结果/输出应该与图片一样…谢谢。但仍然存在一个问题。在任何猜测之前，div应该只包括输入、guesa和reatart游戏。根据猜测，siv应该更大。希望你能理解。。。