Question

我创建了一个＆＃34;点击主人，＆＃34;它可以非常好地判断你对按钮的点击。我想要它，这样当你点击按钮时，它每次都会随机响应淡出。

"That was a nice click... I guess.",
"Wimpy.",
"That click <em>sucked</em>.",
"Not good enough.",
"Click <a href=\"literal.html\">lighter</a> this time!",
"Click <a href=\"literal.html\">harder</a> this time!",
"I barely felt that!",
"Not quite there yet.",
"Nope.",
"Please learn better clicking.",
"Do I, a computer, need to tell <em>you</em> how to <b>click</b>!?",
"Getting better... <em>almost</em>.",
"No. Just... no.",
"I rate it 1/10, worst click of the year.",
"You're purposely clicking bad... <em>right</em>?",
"<span class=\"twoline\">My <b>grandma</b> clicks better than you... and she's a <em>hundred and three years old</em>!</span>",
"I\'m an AI, and even <em>I</em> know that you can\'t click!",
"Maybe you just don\'t have any working fingers...",
"<span class=\"twoline\">Your mouse HAS to be gummed up or something, right? RIGHT?!</span>",
"<span class=\"twoline\">There are people who can click good... and you're not one of them.</span>"
];

$(document).ready(function(){
      $('body').click(function(){
           $(span).addClass('gone');
      });
 });

// DO NOT CHANGE ANYTHING BELOW THIS LINE! //
function newTip() {
  var randomNumber = Math.floor(Math.random() * (ratings.length));
  document.getElementById('quoteDisplay').innerHTML = ratings[randomNumber];
}


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300|Share+Tech+Mono" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <title>THE CLICK MASTER</title>
</head>
<body>
  <h2 class="fadename">THE CLICK MASTER</h2>
  <h6><span>created in about 20 hours by CrashRocks1419 &minus; <a href="../website/main/home.html">Back to my own website</a></span></h6>
  <h1 class="fadeinfo">How well can you click? Get an <span style="border-bottom:6px double black">honest</span> response today!</h1>
  <button onclick="newTip()" id="button">Click me to get a new, <em>helpful</em> tip</button>
  <br>
  <br>
  <div id="quoteDisplay" style="border: 1px solid black;height: 170px;padding:20px;text-align: center;padding-top:110px;">
    <span style="font-family:arial" class="gone">Response appears here...</span>
  </div>
  <script src="javascript.js"></script>
</body>
</html>

有可能吗？

编辑：响应通常只是替换以前的文字。如果可能的话，我希望它删除之前的文本并在下一个文本中淡入。

CSS

``.fadename {
  font-family: Courier New;
  animation: fade1 1s ease;
  font-size: 100px;
  font-weight:normal;
  margin-bottom:-30px;
  margin-top:-10px;
}
.fadeinfo {
  font-family: Lato;
  animation: fade1 3s ease;
}
div {
  font-family: Open Sans Condenses;
  font-size: 50px;
  animation: fade 5s ease;
  background: linear-gradient(#716ab2, #94ba92, #f912db);
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
}
@keyframes fade1 {
  from {opacity: 0;}
  to {opacity: 1;}
}
button {
  font-family: Share Tech Mono;
  color: blue;
  background-color: white;
  animation: fade 1s ease;
  border: 5px solid blue;
  font-weight: bold;
  font-size: 30px;
  transition: box-shadow 0.5s ease, color 0.4s ease, background-color 0.4s ease, border 0.4s ease;
}
button:hover {
  box-shadow: 6px 6px 3px 2px rgba(0,0,0,0.8);
}
button:active {
  color: white;
  background-color: blue;
  border: 5px solid white;
  box-shadow: 1px 1px 2px 1px black inset, 4px 4px 2px 1px black;
}
a {
  color: #111;
  text-decoration: none;
  font-weight: bold;
}
html {
  background: linear-gradient(#8abc3d, #ba72dd);
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  background-color: #ba72dd;
}
b, a {
  color: #f22;
}
.twoline {
  font-size: 37px;
  top: -200px;
}
.gone {
  opacity: 0;
  animation: gone 3s ease forwards;
}
@keyframes gone {
  10% {opacity:0;}
  20% {opacity:0;}
  30% {opacity:1;}
  40% {opacity:1;}
  50% {opacity:1;}
  60% {opacity:1;}
  70% {opacity:1;}
  80% {opacity:1;}
  90% {opacity:1;}
  100% {opacity:0;}
}
h2 {
  width: 980px;
}``

Answer 1

您可以使用fadeToggle()这样的函数：

function newTip() {
  var randomNumber = Math.floor(Math.random() * (ratings.length));
  $('#quoteDisplay span').fadeToggle("slow", function() {
    $(this).html(ratings[randomNumber]);
    $(this).fadeToggle();
  });
}

您可以阅读有关this function

的更多信息

完整代码：

＆＃13;

var ratings = ["That was a nice click... I guess.",
  "Wimpy.",
  "That click <em>sucked</em>.",
  "Not good enough.",
  "Click <a href=\"literal.html\">lighter</a> this time!",
  "Click <a href=\"literal.html\">harder</a> this time!",
  "I barely felt that!",
  "Not quite there yet.",
  "Nope.",
  "Please learn better clicking.",
  "Do I, a computer, need to tell <em>you</em> how to <b>click</b>!?",
  "Getting better... <em>almost</em>.",
  "No. Just... no.",
  "I rate it 1/10, worst click of the year.",
  "You're purposely clicking bad... <em>right</em>?",
  "<span class=\"twoline\">My <b>grandma</b> clicks better than you... and she's a <em>hundred and three years old</em>!</span>",
  "I\'m an AI, and even <em>I</em> know that you can\'t click!",
  "Maybe you just don\'t have any working fingers...",
  "<span class=\"twoline\">Your mouse HAS to be gummed up or something, right? RIGHT?!</span>",
  "<span class=\"twoline\">There are people who can click good... and you're not one of them.</span>"
];



// DO NOT CHANGE ANYTHING BELOW THIS LINE! //
function newTip() {
  var randomNumber = Math.floor(Math.random() * (ratings.length));
  $('#quoteDisplay span').fadeToggle("slow", function() {
    $(this).html(ratings[randomNumber]);
    $(this).fadeToggle();
  });
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300|Share+Tech+Mono" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <title>THE CLICK MASTER</title>
</head>

<body>
  <h2 class="fadename">THE CLICK MASTER</h2>
  <h6><span>created in about 20 hours by CrashRocks1419 &minus; <a href="../website/main/home.html">Back to my own website</a></span></h6>
  <h1 class="fadeinfo">How well can you click? Get an <span style="border-bottom:6px double black">honest</span> response today!</h1>
  <button onclick="newTip()" id="button">Click me to get a new, <em>helpful</em> tip</button>
  <br>
  <br>
  <div id="quoteDisplay" style="border: 1px solid black;height: 170px;padding:20px;text-align: center;padding-top:110px;">
    <span style="font-family:arial" class="gone">Response appears here...</span>
  </div>
  <script src="javascript.js"></script>
</body>

</html>

＆＃13;

每次点击都会淡入div

1 个答案: