使用JavaScript，HTML的建议

Suggestion with JavaScript, HTML

本文关键字：HTML JavaScript 使用      更新时间：2023-09-26

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

像这样： https://i.stack.imgur.com/eH1lw.jpg

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

像这样：https://i.stack.imgur.com/Pz8Wv.jpg

我已经找到了另一种方法来做到这一点，但它不起作用，因为我实际上希望它工作。任何建议，请帮忙。

<!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 是一个很好的起点。我在这里的建议是不要使用fieldset字段集不应该像您使用它们那样用作容器。熟悉div 布局。此外，你格式化一些东西的方式给人的感觉是它来自一个 ASP.NET 环境。我说这是你构建按钮的方式。ASP.NET 开发人员有使用大量内联样式的坏习惯，因为处理 Web 控件的方式。尽可能避免这种情况。

无论如何，转到此演示您将在其中找到样式化代码。祝你好运

相关文章：