text 疯狂的自由游戏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text 疯狂的自由游戏相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>"Funny Mad Lib Story"</title>
<meta charset="UTF-8">
<style>
div {
border: 1px solid rgba(255, 0, 0, 0.863);
background-color: #509e77;
text-align: center;
}
.displayNone {
display: none;
}
.displayBlock {
display: block;
}
</style>
</head>
<body>
<div id="inputPanel">
<h3>A day at the park</h3>
<!-- first word list -->
<p>Adjective:
<input id="adjective1" type="text" placeholder="">
</p>
<p>Noun:
<input id="noun1" type="text" placeholder="">
</p>
<p>Verb (Past tense):
<input id="verb1" type="text" placeholder="">
</p>
<p>Adverb:
<input id="adverb1" type="text" placeholder="">
</p>
<!-- second word list -->
<p>Adjective:
<input id="adjective2" type="text" placeholder="">
</p>
<p>Noun:
<input id="noun2" type="text" placeholder="">
</p>
<p>Verb:
<input id="verb2" type="text" placeholder="">
</p>
<p>Adverb:
<input id="adverb2" type="text" placeholder="">
</p>
<!-- third word list -->
<p>Adjective:
<input id="adjective3" type="text" placeholder="">
</p>
<p>Noun:
<input id="noun3" type="text" placeholder="">
</p>
<p>Verb (Past tense):
<input id="verb3" type="text" placeholder="">
</p>
<!-- fourth word list -->
<p>Adjective:
<input id="adjective4" type="text" placeholder="">
</p>
<button id="submit">Submit your answers</button>
<p id="warning">Please answer all questions.</p>
</div>
<div id="outputPanel">
<p>Your story....</p>
<p id="theStory">junk</p>
<button id="again">Again?</button>
</div>
<script>
var inputPanel = document.querySelector("#inputPanel");
var outputPanel = document.querySelector("#outputPanel");
var warning = document.querySelector("#warning");
var submit = document.querySelector("#submit");
submit.addEventListener("click", writeStory, false);
var again = document.querySelector("#again");
again.addEventListener("click", resetPage, false);
// first word list
var adjective1 = document.querySelector('#adjective1');
document.querySelector('#adjective1').focus(); // double check when debuggging
var noun1 = document.querySelector("#noun1");
document.querySelector('#noun1').focus();
var verb1 = document.querySelector('#verb1');
document.querySelector('#verb1').focus();
var adverb1 = document.querySelector('#adverb1');
document.querySelector('#adverb1').focus();
// second word list
var adjective2 = document.querySelector('#adjective2');
document.querySelector('#adjective2').focus();
var noun2 = document.querySelector("#noun2");
document.querySelector('#noun2').focus();
var verb2 = document.querySelector('#verb2');
document.querySelector('#verb2').focus();
var adverb2 = document.querySelector('#adverb2');
document.querySelector('#adverb2').focus();
// third word list
var adjective3 = document.querySelector('#adjective3');
document.querySelector('#adjective3').focus();
var noun3 = document.querySelector("#noun3");
document.querySelector('#noun3').focus();
var verb3 = document.querySelector('#verb3');
document.querySelector('#verb3').focus();
// fourth word list
var adjective4 = document.querySelector('#adjective4');
document.querySelector('#adjective4').focus();
var theStory = document.querySelector("#theStory");
window.addEventListener("keydown", keydownHandler, false);
inputPanel.class = "displayNone";
outputPanel.class = "displayBlock";
warning.className = "displayNone";
function keydownHandler(event) {
if (event.keyCode === 13) {
console.log("Enter key pressed");
writeStory();
}
}
// start here
function checkComplete() {
if (adjective1.value == "") {
alert("Adjective?");
return false;
} else if (noun1.value == "") {
alert("Noun?");
return false;
} else if (verb1.value == "") {
alert("Verb?");
return false;
} else if (adverb1.value == "") {
alert("Adverb?");
return false;
} else if (adjective2.value == "") {
alert("Adjective?");
return false;
} else if (noun2.value == "") {
alert("Noun?");
return false;
} else if (verb2.value == "") {
alert("Verb?");
return false;
} else if (adverb2.value == "") {
alert("Adverb?");
return false;
} else if (adjective3.value == "") {
alert("Adjective?");
return false;
} else if (noun3.value == "") {
alert("Noun?");
return false;
} else if (verb3.value == "") {
alert("Verb?");
return false;
} else if (adjective4.value == "") {
alert("Adjective?");
return false;
} else {
return true;
}
}
function writeStory() {
if (checkComplete() == true) {
var finishedStory = "";
finishedStory += "<p>Today, I went to the zoo. I saw a(n) " + adjective1.value + " " + noun1.value + " jumping up and down in its tree.";
finishedStory += " He " + verb1.value + " " + adverb1.value + " through the large tunnel that led to its " + adjective2.value + " " + noun2.value + ".</p>";
finishedStory += "<p>I got some peanuts and passed them through the cage to a gigantic gray " + noun3.value + " towering above my head.";
finishedStory += " Feeding that animal made me hungry.</p>";
finishedStory += "<p>I went to get a " + adjective3.value + " scoop of ice cream. It filled my stomach. Afterwards I had to " + verb2.value + " " + adverb2.value + " to catch our bus.";
finishedStory += " When I got home I " + verb3.value + " my mom for a " + adjective4.value + " day at the zoo.</p>";
theStory.innerHTML = finishedStory;
inputPanel.class = "displayNone";
putPanel.class = "displayBlock";
} else {
console.log("the form was not complete");
warning.className = "displayBlock";
}
}
function resetPage() {
inputPanel.class = "displayNone";
outputPanel.class = "displayBlock";
adjective1.value = "";
noun1.value = "";
verb1.value = "";
adverb1.value = "";
adjective2.value = "";
noun2.value = "";
verb2.value = "";
adverb2.value = "";
adjective3.value = "";
noun3.value = "";
verb3.value = "";
adjective4.value = "";
}
</script>
</body>
</html>以上是关于text 疯狂的自由游戏的主要内容，如果未能解决你的问题，请参考以下文章