我正在尝试做一个数字猜谜游戏。不幸的是，count / guessNo变量不断重置自身，表明newGame函数提前结束。这似乎主要发生在从一个猜测数字切换到另一个猜测数字时。请不要建议更改我的HTML;这是一个在线训练营，我们需要使用提供的HTML。这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
newGame();
});
//call newGame when user enters number and presses enter
function newGame() {
var guessNo = 0;
var x = Math.floor(Math.random() * 100) + 1;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
$('.new').click(function(){
newGame();
});
}
function guesser(x,guessNo) {
//jQuery
var guess = parseInt(document.getElementById("userGuess").value, 10);
var y = Math.abs(x-guess);
var r = "";
//switch statement
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
guessNo += 1;
//jQuery
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = guessNo;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
return guessNo;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
}
答案 0 :(得分：0)
解决。基本上，我遇到的问题是我的原始代码中的提交按钮不断重置整个页面而不是仅处理文本框中的信息。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<!-- should not be submit -->
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
CSS:
clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0,0,0,0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong{
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px,
rgb(26, 31, 52) 2px 2px,
rgb(26, 31, 52) 3px 3px,
rgb(26, 31, 53) 4px 4px,
rgb(26, 32, 53) 5px 5px,
rgb(27, 32, 53) 6px 6px,
rgb(27, 32, 54) 7px 7px,
rgb(27, 32, 54) 8px 8px,
rgb(27, 32, 54) 9px 9px,
rgb(27, 33, 55) 10px 10px,
rgb(27, 33, 55) 11px 11px,
rgb(28, 33, 55) 12px 12px,
rgb(28, 33, 56) 13px 13px,
rgb(28, 34, 56) 14px 14px,
rgb(28, 34, 56) 15px 15px,
rgb(28, 34, 57) 16px 16px,
rgb(29, 34, 57) 17px 17px,
rgb(29, 34, 57) 18px 18px,
rgb(29, 35, 58) 19px 19px,
rgb(29, 35, 58) 20px 20px,
rgb(29, 35, 58) 21px 21px,
rgb(29, 35, 59) 22px 22px,
rgb(30, 35, 59) 23px 23px,
rgb(30, 36, 59) 24px 24px,
rgb(30, 36, 60) 25px 25px,
rgb(30, 36, 60) 26px 26px,
rgb(30, 36, 60) 27px 27px,
rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder { /* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder { /* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
Javascript:
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
gameState = {};
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
$('#guessButton').click(function(){
guesser();
console.log("test");
});
$('.new').click(function(){
newGame();
});
});
function newGame() {
gameState.guessNumber = 0;
gameState.number = Math.floor(Math.random() * 100) + 1;
}
function guesser() {
//jQuery
event.preventDefault();
var x = gameState.number
var guess = parseInt($('#userGuess').val());
var y = Math.abs(x-guess);
var r = "";
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
gameState.guessNumber ++;
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = gameState.guessNumber;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
//return guessNo;
}