1
私は、ランドン・クォート・マシンをコーディングしていますが、「新しい見積り」ボタンをクリックすると問題が発生します。簡潔にするため、quotes、colors、およびanimations変数のデータは簡略化され、縮小されています。だから問題はこれです。私がボタンをクリックし続けると、より小さなデータセットで、私は応答時間が長くなり、色、引用符、および/またはアニメーションのいずれも変化しないことに気付きました。これは、アニメーションが常に実行されるわけではないことが明らかです。この小さなデータセットでは、新しい出力が以前の出力とまったく同じになる可能性はあるものの、アニメーションはまだ実行されていることがあります。 loadQuotes()関数がなく、window.onload = loadQuotes();がなく、キーボードでF5キーを押してページをリロードすると、このコードは正しく実行されます。問題は、コードをloadQuotes()関数の中に入れ、ページの最後にwindow.onload = loadQuotes();を使用して初期出力を得るときに始まります。私はすべての変数とloadQuotes()関数の外でrandomNum()関数を移動しようとしました（グローバルであると仮定しているので）、最初のページの読み込み後にボタンをクリックしても何もしません。だから私の懸念は、F5キーを押しながらボタンをクリックして上記のようにページをロードする方法です。ボタンの出力が正しく更新されない
function loadQuotes() {
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var quotes = [
["This is quote number one.", "Person 1"],
["This is quote number two.", "Person 2"],
["This is quote number three.", "Person 3"],
["This is quote number four.", "Person 4"],
["This is quote number five.", "Person 5"]
]
var colors = [
["#096986", "#F69679"],
["#000866", "#FFF799"],
["#7D3563", "#82CA9C"]
]
var animations = ["animated bounce", "animated flash", "animated pulse"]
var getQuotes = randomNum(0, quotes.length - 1);
var getColors = randomNum(0, colors.length - 1);
var newColor0 = colors[getColors][0];
var newColor1 = colors[getColors][1];
var newAnimation1 = animations[randomNum(0, animations.length - 1)]
var newAnimation2 = animations[randomNum(0, animations.length - 1)]
document.getElementById("quote").innerHTML = "<h1>" + quotes[getQuotes][0] + "</h1>";
document.getElementById("author").innerHTML = "<h3>" + "--- " + quotes[getQuotes][1] + "</h3>";
$(document).ready(function() {
$(".side-panel").css("background-color", newColor0);
$(".middle").css("background-color", newColor1);
$("#quote").addClass(newAnimation1);
$("#author").addClass(newAnimation2);
$(".btn").on("click", function() {
loadQuotes();
});
});
}
window.onload = loadQuotes();h1 {
text-align: center;
font-size: 3.5em;
}
h3 {
font-size: 1.5em;
}
/* div { border: 1px solid black; } */
.full-height {
height: 100vh;
}
.side-panel {
background-color: newColor0;
}
.middle {
background-color: newColor1;
}
.quote-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 65%;
border-radius: 7.5%;
background-color: #FFFFFF;
}
.quote-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 50%;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Random Quote Machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 side-panel full-height"></div>
<div class="col-xs-10 middle full-height">
<div class="quote-box">
<div class="quote-text">
<p id="quote"></p>
<p id="author"></p>
<button type="button" class="btn btn-lg pull-right">New Quote</button>
</div>
</div>
</div>
<div class="col-xs-1 side-panel full-height"></div>
</div>
</div>
</body>
</html>
引用符。おそらく正確な問題を説明してくれるかもしれません。 – Iceman
私はボタンをスパムしようとしたが、私のブラウザはほとんどクラッシュした。 – technico