快速问题我有一个textfeild和一个按钮
<h4 style="color:white;">Enter Player Name</h4>
<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
<hr>
<center><button class="start"><b><i>START</i></b></button></center>
目前，当用户点击按钮时，无论天气如何，都会播放游戏
我需要帮助才能阻止按钮功能关闭，直到填入
$(document).ready(function () { //document ready
$('.start').on('mouseup', function () { //initialise a game when the start button is clicked
$(this).hide();
game.difficulty = $('input[name=difficulty]:checked').val();
$('.difficulty').hide();
game.init();
});
});
所有我需要的是一个jquery的帮助，在文本字段中输入名称之前不会运行游戏
这是运行版本供您查看
var game = { //game object
level: 1, //current level
turn: 0, //current turn
difficulty: 1, // user difficulty
score: 0, //current score
active: false, //whether a turn is active or not
handler: false, // whether the click and sound handlers are active
shape: '.shape', // cached string for the pad class
genSequence: [], //array containing the generated/randomized pads
plaSequence: [], //array containing the users pad selections
colors: ['Green', 'Red', 'Yellow', 'Blue'],
init: function () { //initialises the game
if (this.handler === false) { //checks to see if handlers are already active
this.initPadHandler(); //if not activate them
}
this.newGame(); //reset the game defaults
},
initPadHandler: function () {
that = this;
$('.pad').on('mouseup', function () {
if (that.active === true) {
var pad = parseInt($(this).data('pad'), 10);
that.flash($(this), 1, 300, pad);
that.logPlayerSequence(pad);
}
});
this.handler = true;
},
newGame: function () { //resets the game and generates a starts a new level
this.level = 1;
this.score = 0;
this.newLevel();
this.displayLevel();
this.displayScore();
//initialize timer to 10 seconds (10.0)
this.timer = 10;
},
newLevel: function () {
this.genSequence.length = 0;
this.plaSequence.length = 0;
this.pos = 0;
this.turn = 0;
this.active = true;
this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level
this.displaySequence(); //show the user the sequence
},
flash: function (element, times, speed, pad) { //function to make the pads appear to flash
var that = this; //cache this
if (times > 0) { //make sure we are supposed to flash
that.playSound(pad); //play the corresponding pad sound
if ($("#flash").is(":checked")) {//Check Box Function
element.stop().animate({
opacity: '1'
}, { //animate the element to appear to flash
duration: 50,
complete: function () {
element.stop().animate({
opacity: '0.6'
}, 200);
}
}); //end animation
}
if (times > 0) { //call the flash function again until done the correct amount of times
setTimeout(function () {
that.flash(element, times, speed, pad);
}, speed);
times -= 1; //times - 1 for each time it's called
}
}
},
////////////////////////////////////////////////////////////////////////////////////////////////////////////
playSound: function (clip) { //plays the sound that corresponds to the pad chosen
if ($("#sound").is(":checked")) {//Check Box Function
var sound = $('.sound' + clip)[0];
console.log(sound);
console.log($('.sound' + clip));
sound.currentTime = 0; //resets audio position to the start of the clip
sound.play(); //play the sound
}
},
randomizePad: function (passes) { //generate random numbers and push them to the generated number array iterations determined by current level
for (i = 0; i < passes; i++) {
this.genSequence.push(Math.floor(Math.random() * 4) + 1);
}
},
logPlayerSequence: function (pad) { //log the player selected pad to user array and call the checker function
this.plaSequence.push(pad);
this.checkSequence(pad);
},
checkSequence: function (pad) { //checker function to test if the pad the user pressed was next in the sequence
that = this;
if (pad !== this.genSequence[this.turn]) { //if not correct
this.incorrectSequence();
} else { //if correct
this.keepScore(); //update the score
this.turn++; //incrememnt the turn
}
if (this.turn === this.genSequence.length) { //if completed the whole sequence
this.level++; //increment level, display it, disable the pads wait 1 second and then reset the game
this.displayLevel();
this.active = false;
// Stop counting when sequence is correct to avoid time running out before starting next level
clearInterval(this.timerInterval);
//Add 5.0 seconds each 5th level
this.timer = 10 + 5 * Math.floor(this.level / 5);
//Update timerdisplay to show fulltime while displaying next level sequence
$(".Timer p").html(this.timer);
setTimeout(function () {
that.newLevel();
}, 1000);
}
},
// Countdown and update timer, call incorrectsequence when time's up
countDown: function () {
this.timer -= 0.1;
$(".Timer p").html(this.timer.toFixed(1)); // Display 9.0 instad of 9
if (this.timer < 0.1) {
this.incorrectSequence();
}
},
displaySequence: function () { //display the generated sequence to the user
var that = this;
var timerCount = 0;
$.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
timerCount = index;
setTimeout(function () {
that.flash($(that.shape + val), 1, 300, val);
if ($("#text").is(":checked")) {//Check Box Function
$(".TextBox").children(":first").html('<b>' + (index + 1) + " : " +that.colors[val-1]+'</b>');
}
}, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier
});
// Wait to start timer until full sequence is displayed
setTimeout(function () {
that.timerInterval = setInterval(function () {
that.countDown()
}, 100)
setTimeout(function () {
$(".TextBox").children(":first").html('');
}, 500);
}, 500 * timerCount * that.difficulty);
},
displayLevel: function () { //just display the current level on screen
$('.level h2').text('Level: ' + this.level);
},
displayScore: function () { //display current score on screen
$('.score h2').text('Score: ' + this.score);
},
keepScore: function () { //keep the score
var multiplier = 0;
switch (this.difficulty) //choose points modifier based on difficulty
{
case '2':
multiplier = 1;
break;
case '1':
multiplier = 2;
break;
case '0.5':
multiplier = 3;
break;
case '0.25':
multiplier = 4;
break;
}
this.score += (1 * multiplier); //work out the score
this.displayScore(); //display score on screen
},
incorrectSequence: function () { //if user makes a mistake
//Stop counting down timer and display start message
clearInterval(this.timerInterval);
$(".Timer p").html("<b>Game Over</b>");
var corPad = this.genSequence[this.turn], //cache the pad number that should have been pressed
that = this;
this.active = false;
this.displayLevel();
this.displayScore();
setTimeout(function () { //flash the pad 4 times that should have been pressed
that.flash($(that.shape + corPad), 4, 300, corPad);
}, 500);
$(".TextBox").children(":first").html("<b>The Right Answer was " + that.colors[corPad - 1] + " Try Again </b>");
$('.start').show(); //enable the start button again and allow difficulty selection again
$('.difficulty').show();
}
};
$(document).ready(function () { //document ready
$('.start').on('mouseup', function () { //initialise a game when the start button is clicked
$(this).hide();
game.difficulty = $('input[name=difficulty]:checked').val();
$('.difficulty').hide();
game.init();
});
});body {
background-color: #333;
}
input[type="radio"] {
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
li {
display: inline-block;
}
/* This is the new image part just add in it here */
.logo{
position: relative;
width:350px;
height:180px;
background-image: url("GroupLogo1.png");
background-size:90%;
background-repeat: no-repeat;
}
/* It ends here */
.Informationhead{
position: relative;
width: 1120px;
height:50px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
color: black;
margin-bottom:2.5px;
cursor: pointer; cursor: hand;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 16px;
}
.Information{
position: relative;
width: 1000px;
height:400px;
margin: 0 auto;
display:none;
text-align:center;
background-image: url("Info4.png");
background-size:100%;
padding-top:45px;
margin-bottom:10px;
margin-left:300px:
}
.InfoText{
position: relative;
width: 820px;
margin: 0 auto;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 13.5px;
}
.wrapper {
position: relative;
width: 900px;
margin: 0 auto ;
border: 5px groove #8E2B2B;
border-radius: 15px;
padding-left:220px;
margin-bottom:2.5px;
}
.wrapper2{
position: absolute;
width: 165px;
height:510px;
margin: 0 auto;
border: 3.5px groove #8E2B2B;
border-radius: 15px;
margin-top:10px;
padding:5px;
margin-left: -18%;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 15px;
}
.wrapper3{
position: absolute;
background-size:100%;
width: 200px;
height:380px;
margin-left: 60%;
margin-top:10px;
padding:5px;
border: 3.5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 15.5px;
}
.back {
position: relative;
width: 648px;
height: 648px;
z-index: 0;
background-color: #000;
border:3.5px ridge white;
border-radius: 310px;
}
.pad {
width: 300px;
height: 300px;
float: left;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
border-top-left-radius: 300px;
background-color: green;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.shape2 {
float: left;
border-top-right-radius: 300px;
background-color: red;
clear: right;
border:2.5px groove white;
position: relative;
cursor: pointer; cursor: hand;
}
.shape3 {
float: left;
border-bottom-left-radius: 300px;
background-color: yellow;
clear: left;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.shape4 {
float: left;
border-bottom-right-radius: 300px;
background-color: blue;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.Timer {
position: absolute;
top: 195px;
left: 195px;
width: 250px;
height: 250px;
background: #000;
border-radius: 125px;
border:2.5px solid White;
z-index: 10;
color:white;
}
.TextBox{
position: absolute;
width: 200px;
height:65px;
text-align:center;
margin-left:8.9%;
margin-top:38%
}
.level, .score {
text-align: center;
}
.start {
border-top: 1px solid #f79797;
background: #d66565;
background: -webkit-gradient(linear, left top, left bottom, from(#9c3e3e), to(#d66565));
background: -webkit-linear-gradient(top, #9c3e3e, #d66565);
background: -moz-linear-gradient(top, #9c3e3e, #d66565);
background: -ms-linear-gradient(top, #9c3e3e, #d66565);
background: -o-linear-gradient(top, #9c3e3e, #d66565);
padding: 5.5px 11px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #000000;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.start:hover {
border-top-color: #2c7828;
background: #2c7828;
color: #ccc;
}
.start:active {
border-top-color: #1b5c24;
background: #1b5c24;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Style/Main_Style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="Mechanics/script.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#Informationhead").click(function(){
$("#Information").slideToggle("fast");
});
});
</script>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
</script>
</head>
<body>
<!-- This is the part you add in the html -->
<br />
<center><div class="logo"></div></center>
<br />
<!-- This is were it ends -->
<div class="Informationhead"id="Informationhead"><h3 style="color:white;"><b>Information and Our Goal</b></h3></div>
<div class="Information"id="Information">
<h2><i>Welcome to the E-lemon-ators Memory Improver</i></h2>
<div class="InfoText"><p><b>Better memory will improve your focus, problem solving, and multitasking skills. It will also help to control all kinds of distractions and keep your impulses in check. As little as 5 minutes per day of brain training can yield significant results. Brain training is just like muscle training - the more you train, the better results you get! This game is your perfect memory exerciser it is suitable for kids, students, adults, and seniors!
Don't be surprised if you do better on your next IQ test or brain age test. These type of games are a scientifically proven way to boost your brain power and health not only that, they also reduce the risk of memory loss (dementia) with older adults.
The game will help students and business professionals alike - whether it's a client's name or a more polished presentation, or studying for an exam. The results will be quickly noticed.</i></b></p>
<p><b>We the E-lemon-ators want to help you improve you memory with our game which is designed around the 3 different ways you can retain information, Sight, Sound and Reading. Each user can set there game up they way the want for the best result</b></p>
</div>
<p><b>Please Help Us, Help others by spreading our message</b></p>
<a class="twitter-share-button"
href="https://twitter.com/share"
data-url="https://www.E-lemon-ators.com"
data-text="Getting Better Memory Thanks to The E-lemon-ators Memory Game! Think you can do better,Try beat me?"
data-count="horizontal">
</a>
</div>
<div class="wrapper">
<div class="wrapper2">
<hr>
<div class="level">
<h2 style="color:white;">Level: 1</h2>
</div>
<div class="score">
<h2 style="color:white;">Score: 0</h2>
</div>
<hr>
<ul class="difficulty">
<h4 style="color:white;font-family:Arial;font-weight: 900;font-size:15px;">Choose Your Difficulty</h4>
<li>
<input type="radio" class="difOpt" name="difficulty" value="2"><span style="color:white;">Easy</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked><span style="color:white;">Normal</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5"><span style="color:white;">Hard</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25"><span style="color:white;">Insane</span>
</li>
</ul>
<hr>
<h4 style="color:white;">Enter Player Name</h4>
<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
<hr>
<center><button class="start"><b><i>START</i></b></button></center>
</div>
<div class="wrapper3">
<hr>
<h3 style="color:white;">Choose Your Game Preferences</h3>
<hr>
<h4 style="color:white;">Do You Want Sound ?</h4>
<input type="checkbox" value="No" id="sound"><span style="color:white;"><b>Yes</b></span>
<h4 style="color:white;">Do You want Text ?</h4>
<input type="checkbox" value="No" id="text"><span style="color:white;"><b>Yes</b></span>
<h4 style="color:white;">Do You want Flashes ?</h4>
<input type="checkbox" value="No" id="flash" checked><span style="color:white;"><b>Yes</b></span>
</div>
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="Timer">
<br />
<br />
<div class="TextBox">
<h4 style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>If You selected Text, It will Be Here </b></h4>
</div>
<br />
<br />
<center><p style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>Time starts when you click start</b></p></center>
<hr>
<hr>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
首先，使用click，而不是mouseup，使用按钮。
然后只是获取玩家的名字，如果它是空白的话，不要开始游戏：
$(document).ready(function () { //document ready
$('.start').on('click', function () { //initialise a game when the start button is clicked
var playerName = $.trim($("input[name=PlayerName]").val());
if (!playerName) {
// Tell user to fill it in
// ...
} else {
$(this).hide();
game.difficulty = $('input[name=difficulty]:checked').val();
$('.difficulty').hide();
game.init();
}
});
});
var game = { //game object
level: 1, //current level
turn: 0, //current turn
difficulty: 1, // user difficulty
score: 0, //current score
active: false, //whether a turn is active or not
handler: false, // whether the click and sound handlers are active
shape: '.shape', // cached string for the pad class
genSequence: [], //array containing the generated/randomized pads
plaSequence: [], //array containing the users pad selections
colors: ['Green', 'Red', 'Yellow', 'Blue'],
init: function () { //initialises the game
if (this.handler === false) { //checks to see if handlers are already active
this.initPadHandler(); //if not activate them
}
this.newGame(); //reset the game defaults
},
initPadHandler: function () {
that = this;
$('.pad').on('mouseup', function () {
if (that.active === true) {
var pad = parseInt($(this).data('pad'), 10);
that.flash($(this), 1, 300, pad);
that.logPlayerSequence(pad);
}
});
this.handler = true;
},
newGame: function () { //resets the game and generates a starts a new level
this.level = 1;
this.score = 0;
this.newLevel();
this.displayLevel();
this.displayScore();
//initialize timer to 10 seconds (10.0)
this.timer = 10;
},
newLevel: function () {
this.genSequence.length = 0;
this.plaSequence.length = 0;
this.pos = 0;
this.turn = 0;
this.active = true;
this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level
this.displaySequence(); //show the user the sequence
},
flash: function (element, times, speed, pad) { //function to make the pads appear to flash
var that = this; //cache this
if (times > 0) { //make sure we are supposed to flash
that.playSound(pad); //play the corresponding pad sound
if ($("#flash").is(":checked")) {//Check Box Function
element.stop().animate({
opacity: '1'
}, { //animate the element to appear to flash
duration: 50,
complete: function () {
element.stop().animate({
opacity: '0.6'
}, 200);
}
}); //end animation
}
if (times > 0) { //call the flash function again until done the correct amount of times
setTimeout(function () {
that.flash(element, times, speed, pad);
}, speed);
times -= 1; //times - 1 for each time it's called
}
}
},
////////////////////////////////////////////////////////////////////////////////////////////////////////////
playSound: function (clip) { //plays the sound that corresponds to the pad chosen
if ($("#sound").is(":checked")) {//Check Box Function
var sound = $('.sound' + clip)[0];
console.log(sound);
console.log($('.sound' + clip));
sound.currentTime = 0; //resets audio position to the start of the clip
sound.play(); //play the sound
}
},
randomizePad: function (passes) { //generate random numbers and push them to the generated number array iterations determined by current level
for (i = 0; i < passes; i++) {
this.genSequence.push(Math.floor(Math.random() * 4) + 1);
}
},
logPlayerSequence: function (pad) { //log the player selected pad to user array and call the checker function
this.plaSequence.push(pad);
this.checkSequence(pad);
},
checkSequence: function (pad) { //checker function to test if the pad the user pressed was next in the sequence
that = this;
if (pad !== this.genSequence[this.turn]) { //if not correct
this.incorrectSequence();
} else { //if correct
this.keepScore(); //update the score
this.turn++; //incrememnt the turn
}
if (this.turn === this.genSequence.length) { //if completed the whole sequence
this.level++; //increment level, display it, disable the pads wait 1 second and then reset the game
this.displayLevel();
this.active = false;
// Stop counting when sequence is correct to avoid time running out before starting next level
clearInterval(this.timerInterval);
//Add 5.0 seconds each 5th level
this.timer = 10 + 5 * Math.floor(this.level / 5);
//Update timerdisplay to show fulltime while displaying next level sequence
$(".Timer p").html(this.timer);
setTimeout(function () {
that.newLevel();
}, 1000);
}
},
// Countdown and update timer, call incorrectsequence when time's up
countDown: function () {
this.timer -= 0.1;
$(".Timer p").html(this.timer.toFixed(1)); // Display 9.0 instad of 9
if (this.timer < 0.1) {
this.incorrectSequence();
}
},
displaySequence: function () { //display the generated sequence to the user
var that = this;
var timerCount = 0;
$.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
timerCount = index;
setTimeout(function () {
that.flash($(that.shape + val), 1, 300, val);
if ($("#text").is(":checked")) {//Check Box Function
$(".TextBox").children(":first").html('<b>' + (index + 1) + " : " +that.colors[val-1]+'</b>');
}
}, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier
});
// Wait to start timer until full sequence is displayed
setTimeout(function () {
that.timerInterval = setInterval(function () {
that.countDown()
}, 100)
setTimeout(function () {
$(".TextBox").children(":first").html('');
}, 500);
}, 500 * timerCount * that.difficulty);
},
displayLevel: function () { //just display the current level on screen
$('.level h2').text('Level: ' + this.level);
},
displayScore: function () { //display current score on screen
$('.score h2').text('Score: ' + this.score);
},
keepScore: function () { //keep the score
var multiplier = 0;
switch (this.difficulty) //choose points modifier based on difficulty
{
case '2':
multiplier = 1;
break;
case '1':
multiplier = 2;
break;
case '0.5':
multiplier = 3;
break;
case '0.25':
multiplier = 4;
break;
}
this.score += (1 * multiplier); //work out the score
this.displayScore(); //display score on screen
},
incorrectSequence: function () { //if user makes a mistake
//Stop counting down timer and display start message
clearInterval(this.timerInterval);
$(".Timer p").html("<b>Game Over</b>");
var corPad = this.genSequence[this.turn], //cache the pad number that should have been pressed
that = this;
this.active = false;
this.displayLevel();
this.displayScore();
setTimeout(function () { //flash the pad 4 times that should have been pressed
that.flash($(that.shape + corPad), 4, 300, corPad);
}, 500);
$(".TextBox").children(":first").html("<b>The Right Answer was " + that.colors[corPad - 1] + " Try Again </b>");
$('.start').show(); //enable the start button again and allow difficulty selection again
$('.difficulty').show();
}
};
$(document).ready(function () { //document ready
$('.start').on('click', function () { //initialise a game when the start button is clicked
var playerName = $.trim($("input[name=PlayerName]").val());
if (!playerName) {
// Tell user to fill it in
// ...
} else {
$(this).hide();
game.difficulty = $('input[name=difficulty]:checked').val();
$('.difficulty').hide();
game.init();
}
});
});body {
background-color: #333;
}
input[type="radio"] {
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
li {
display: inline-block;
}
/* This is the new image part just add in it here */
.logo{
position: relative;
width:350px;
height:180px;
background-image: url("GroupLogo1.png");
background-size:90%;
background-repeat: no-repeat;
}
/* It ends here */
.Informationhead{
position: relative;
width: 1120px;
height:50px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
color: black;
margin-bottom:2.5px;
cursor: pointer; cursor: hand;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 16px;
}
.Information{
position: relative;
width: 1000px;
height:400px;
margin: 0 auto;
display:none;
text-align:center;
background-image: url("Info4.png");
background-size:100%;
padding-top:45px;
margin-bottom:10px;
margin-left:300px:
}
.InfoText{
position: relative;
width: 820px;
margin: 0 auto;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 13.5px;
}
.wrapper {
position: relative;
width: 900px;
margin: 0 auto ;
border: 5px groove #8E2B2B;
border-radius: 15px;
padding-left:220px;
margin-bottom:2.5px;
}
.wrapper2{
position: absolute;
width: 165px;
height:510px;
margin: 0 auto;
border: 3.5px groove #8E2B2B;
border-radius: 15px;
margin-top:10px;
padding:5px;
margin-left: -18%;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 15px;
}
.wrapper3{
position: absolute;
background-size:100%;
width: 200px;
height:380px;
margin-left: 60%;
margin-top:10px;
padding:5px;
border: 3.5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
font-family: "Arial Black", Arial;
font-weight: 900;
font-size: 15.5px;
}
.back {
position: relative;
width: 648px;
height: 648px;
z-index: 0;
background-color: #000;
border:3.5px ridge white;
border-radius: 310px;
}
.pad {
width: 300px;
height: 300px;
float: left;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
border-top-left-radius: 300px;
background-color: green;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.shape2 {
float: left;
border-top-right-radius: 300px;
background-color: red;
clear: right;
border:2.5px groove white;
position: relative;
cursor: pointer; cursor: hand;
}
.shape3 {
float: left;
border-bottom-left-radius: 300px;
background-color: yellow;
clear: left;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.shape4 {
float: left;
border-bottom-right-radius: 300px;
background-color: blue;
border:2.5px groove white;
cursor: pointer; cursor: hand;
}
.Timer {
position: absolute;
top: 195px;
left: 195px;
width: 250px;
height: 250px;
background: #000;
border-radius: 125px;
border:2.5px solid White;
z-index: 10;
color:white;
}
.TextBox{
position: absolute;
width: 200px;
height:65px;
text-align:center;
margin-left:8.9%;
margin-top:38%
}
.level, .score {
text-align: center;
}
.start {
border-top: 1px solid #f79797;
background: #d66565;
background: -webkit-gradient(linear, left top, left bottom, from(#9c3e3e), to(#d66565));
background: -webkit-linear-gradient(top, #9c3e3e, #d66565);
background: -moz-linear-gradient(top, #9c3e3e, #d66565);
background: -ms-linear-gradient(top, #9c3e3e, #d66565);
background: -o-linear-gradient(top, #9c3e3e, #d66565);
padding: 5.5px 11px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #000000;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.start:hover {
border-top-color: #2c7828;
background: #2c7828;
color: #ccc;
}
.start:active {
border-top-color: #1b5c24;
background: #1b5c24;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Style/Main_Style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="Mechanics/script.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#Informationhead").click(function(){
$("#Information").slideToggle("fast");
});
});
</script>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
</script>
</head>
<body>
<!-- This is the part you add in the html -->
<br />
<center><div class="logo"></div></center>
<br />
<!-- This is were it ends -->
<div class="Informationhead"id="Informationhead"><h3 style="color:white;"><b>Information and Our Goal</b></h3></div>
<div class="Information"id="Information">
<h2><i>Welcome to the E-lemon-ators Memory Improver</i></h2>
<div class="InfoText"><p><b>Better memory will improve your focus, problem solving, and multitasking skills. It will also help to control all kinds of distractions and keep your impulses in check. As little as 5 minutes per day of brain training can yield significant results. Brain training is just like muscle training - the more you train, the better results you get! This game is your perfect memory exerciser it is suitable for kids, students, adults, and seniors!
Don't be surprised if you do better on your next IQ test or brain age test. These type of games are a scientifically proven way to boost your brain power and health not only that, they also reduce the risk of memory loss (dementia) with older adults.
The game will help students and business professionals alike - whether it's a client's name or a more polished presentation, or studying for an exam. The results will be quickly noticed.</i></b></p>
<p><b>We the E-lemon-ators want to help you improve you memory with our game which is designed around the 3 different ways you can retain information, Sight, Sound and Reading. Each user can set there game up they way the want for the best result</b></p>
</div>
<p><b>Please Help Us, Help others by spreading our message</b></p>
<a class="twitter-share-button"
href="https://twitter.com/share"
data-url="https://www.E-lemon-ators.com"
data-text="Getting Better Memory Thanks to The E-lemon-ators Memory Game! Think you can do better,Try beat me?"
data-count="horizontal">
</a>
</div>
<div class="wrapper">
<div class="wrapper2">
<hr>
<div class="level">
<h2 style="color:white;">Level: 1</h2>
</div>
<div class="score">
<h2 style="color:white;">Score: 0</h2>
</div>
<hr>
<ul class="difficulty">
<h4 style="color:white;font-family:Arial;font-weight: 900;font-size:15px;">Choose Your Difficulty</h4>
<li>
<input type="radio" class="difOpt" name="difficulty" value="2"><span style="color:white;">Easy</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked><span style="color:white;">Normal</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5"><span style="color:white;">Hard</span>
</li>
<br />
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25"><span style="color:white;">Insane</span>
</li>
</ul>
<hr>
<h4 style="color:white;">Enter Player Name</h4>
<input type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
<hr>
<center><button class="start"><b><i>START</i></b></button></center>
</div>
<div class="wrapper3">
<hr>
<h3 style="color:white;">Choose Your Game Preferences</h3>
<hr>
<h4 style="color:white;">Do You Want Sound ?</h4>
<input type="checkbox" value="No" id="sound"><span style="color:white;"><b>Yes</b></span>
<h4 style="color:white;">Do You want Text ?</h4>
<input type="checkbox" value="No" id="text"><span style="color:white;"><b>Yes</b></span>
<h4 style="color:white;">Do You want Flashes ?</h4>
<input type="checkbox" value="No" id="flash" checked><span style="color:white;"><b>Yes</b></span>
</div>
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="Timer">
<br />
<br />
<div class="TextBox">
<h4 style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>If You selected Text, It will Be Here </b></h4>
</div>
<br />
<br />
<center><p style="color:White;font-family:Arial;font-weight: 900;font-size:14.2px;"><b>Time starts when you click start</b></p></center>
<hr>
<hr>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
完全不需要JQuery，
您所需要做的就是包装文本输入和按钮
在html <form></form>元素中。
＆作为您的输入，添加必填属性。
<input required type="text" name="PlayerName" placeholder=""style="border :5px groove #8E2B2B; border-radius: 15px;width:155px;height:25px;">
或
required="required", required="true", required="1"
我认为所有这些都是有效的...
这将防止在没有必填输入字段的情况下提交表单， ＆还将提供特定于浏览器的工具提示，提示该字段为必填字段。
作为无关的额外内容，您应该从文档的开头删除脚本，并将其放在页面的底部，紧挨着body标记的上方。因为这样会减慢页面加载时间。.还有多个h2 or h4标签是不好的做法，并且可能会影响SEO，请尝试将这些标签换成段落或前置元素。