1
我正在編碼randon報價機器，並且在點擊「新報價」按鈕時出現問題。爲了簡潔起見，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