我是一名从事作业的新手。我需要将变量与输入进行比较。如果randomNumber变量和输入之间的差异是30或更大，那么我希望#feedback的文本是非常冷的＆＃34;。 示例1：randomNumber = 50，输入值= 20，然后#feedback应该是＃34;非常冷＆＃34;
示例2：randomNumber = 50，输入值= 90，然后#feedback应该是＆＃34;非常冷＆＃34;
$(document).ready(function(){
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random()*100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame(){
guessCount = 0;
randomNumber = (Math.floor(Math.random()*100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess(){
if ($("#userGuess").val() == randomNumber) {
$('#feedback').text('You Win!');
}
}
//sets number of counts
function setCount(count){
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$( ".new" ).click(function() {
newGame();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="button"
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>
JS Fidde：https://jsfiddle.net/jelane20/w8jxqjem/6/
如果我需要提供更多信息，请告诉我，谢谢！
答案 0 :(得分：0)
您只需在compareGuess()
if(input > randomNumber)
{
if((input - randomNumber) > 30)
{
$("#feedback").text("Very cold!");
}
}
<强> FIDDLE
<小时/> 的段
$(document).ready(function() {
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random() * 100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame() {
guessCount = 0;
randomNumber = (Math.floor(Math.random() * 100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess() {
console.log("Guessing");
var input = parseInt($("#userGuess").val());
if (input == randomNumber) {
$('#feedback').text('You Win!');
}
if (input > randomNumber) {
if ((input - randomNumber) >= 30) {
$("#feedback").text("Very cold!");
}
}
}
//sets number of counts
function setCount(count) {
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$(".new").click(function() {
newGame();
});
});
$(document).ready(function() {
/*--- Display information modal box ---*/
$(".what").click(function() {
$(".overlay").fadeIn(1000);
});
/*--- Hide information modal box ---*/
$("a.close").click(function() {
$(".overlay").fadeOut(1000);
});
});/*---------------------------------------------------------------------------------
Common Styles
---------------------------------------------------------------------------------*/
/*float styles*/
.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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>
答案 1 :(得分：0)
我怀疑你的问题是如何检查randomnNumber和用户输入之间的差异是否大于30.这是JavaScript中的解决方案：
var userInput = $("#userGuess").val();
var difference = Math.abs(randomNumber - userInput);
if (difference > 30){
$('#feedback').text('very cold');
}
答案 2 :(得分：0)
在所有事情之前，正如许多人已经提到的那样。您需要删除<form>代码并将输入类型从submit更改为button。
我查看了你的代码，我已经改变了它，向你展示了如何完成检查。检查JSFiddle：
https://jsfiddle.net/1w17oh13/3/
所有检查都将在compareGuess()
//user guess
function compareGuess()
{
var guess = parseInt($("#userGuess").val());
guessCount += 1;
guesses.push(guess);
guessDistance = Math.abs(randomNumber - guess);
previousGuessDistance = Math.abs(randomNumber - guesses[guesses.length - 2]);
if (guess == randomNumber)
{
$('#feedback').text('You Win!');
}
else {
console.log(guess, randomNumber, previousGuessDistance, guessDistance);
if (isNaN(previousGuessDistance)) {
if (guess > randomNumber) {
$('#feedback').text('Guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Guess higher!');
}
} else if (guessDistance > previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting colder');
} else if (guess < randomNumber) {
$('#feedback').text('Getting colder, guess higher!');
}
} else if (guessDistance < previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting hotter, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Getting hotter, guess higher!');
}
} else if (guessDistance === previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('On fire, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('On fire, guess higher!');
}
} else {
$('#feedback').text('ERROR: Your guess must be a number between 1 and 100').css({
color: 'red'
});
}
}
}