我尝试了所有这三个，但它似乎没有改变文本，我有一组随机引号我想在屏幕上显示，我试图改变它们但我使用的jquery方法似乎没有工作，这是我的HTML和JavaScript代码。 这是我当前代码的片段，以及到目前为止我实际尝试过的内容：
var main = function() {
var colors = ["#ED2007", "#EDAB07", "#ECF30A", "#69F30A", "#0AF3E8", "#0A69F3", "#DE0AF3", "#F30ADE"];
var quotes = [
"If you have nothing, are you a nillionaire?",
"Turning up the volume is like zooming in, but with sound.",
"If I eat myself, will I get twice as big, or disappear completely?",
"Out of my mind. Back in five minutes",
"I’m not a complete idiot — Some parts are missing."
];
//begin
//when btn-1 is click, perform following
$(".btn-1").click(function(){
var $this = $(this);
$this.button('loading');
setTimeout(function() {
//begin loop
for(var i = 0; i < quotes.length; i++){
var randQuote =
((Math.random() * quotes[i].length-1) + 0);
switch(randQuote){
case 0:
$('#quote').html("If you have nothing, are you a nillionaire?");
break;
case 1:
$('#quote').html("Turning up the volume is like zooming in, but with sound.");
break;
case 2:
$('#quote').html("If I eat myself, will I get twice as big, or disappear completely?");
break;
case 3:
$('#quote').html("Out of my mind. Back in five minutes");
break;
case 4:
$('#quote').html("I’m not a complete idiot — Some parts are missing.");
break;
default:
$('#quote').html("Press New Quote Button for a random quote");
}
}
//end loop
for(var j = 0; j < colors.length; j++){
var randColor = Math.floor((Math.random() * colors[j].length-1) + 0);
switch(randColor){
case 0: document.body.style.backgroundColor = "#ED2007";
$this.css('background-color', '#ED2007');
break;
case 1:
document.body.style.backgroundColor = "#EDAB07";
$this.css('background-color', '#EDAB07');
break;
case 2:
document.body.style.backgroundColor ="#ECF30A";
$this.css('background-color', '#ECF30A');
break;
case 3:
document.body.style.backgroundColor = "#69F30A";
$this.css('background-color', '#69F30A');
break;
case 4:
document.body.style.backgroundColor ="#0AF3E8";
$this.css('background-color', '#0AF3E8');
break;
case 5:
document.body.style.backgroundColor = "#0A69F3";
$this.css('background-color', '#0A69F3');
break;
case 6:
document.body.style.backgroundColor = "#DE0AF3";
$this.css('background-color', '#DE0AF3');
break;
case 7:
document.body.style.backgroundColor="#F30ADE";
$this.css('background-color', '#F30ADE');
break;
default:
document.body.style.backgroundColor="#00ccff";
$this.css('background-color', '#00ccff');
}
}
$this.button('reset');
}, 4000);
});
//end
//when tumblr btn is click, perform following
$(".fa-tumblr-square").click(function(){
location.href = "https://www.tumblr.com/";
});
//when twitter btn is click, perform following
$(".fa-twitter-square").click(function(){
location.href = 'https://twitter.com/intent/tweet?text=';
});
};
$(document).ready(main);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar|Supermercado+One" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="head">
<h2>Random Quote Machine</h2>
</div>
</head>
<body>
<p></p>
<div class="boxed">
<p id="quote" >"Press New Quote Button for a random quote"</p>
<div class="btns">
<i class="fa fa-tumblr-square" style="font-size:36px;color:#0A4289"></i>
<i class="fa fa-twitter-square" style="font-size:36px;color:#07F5E7"></i>
<button type="button" class="btn-1" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Fetching">New Quote</button>
</div>
</div>
<br>
<div class="footer">
<p> <a class="link" href="https://codepen.io/natekicksa/">By:Nate</a></p>
</div>
</body>
</div>
答案 0 :(得分：1)
{{1}}
.html（）没有问题。
代码中的基本问题是随机函数。我认为代码是自我解释的。有关随机函数的更多信息，请点击链接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
我还通过使用您的代码找到了一些简单的错误：
答案 1 :(得分：0)
我的猜测是你没有在文档的头部包含jQuery。尝试添加这个为你的头，看看你的jQuery函数现在是否正常工作：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar|Supermercado+One" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="head">
<h2>Random Quote Machine</h2>
</div>
</head>
这只是基于您在上面提供的代码段的猜测。希望它有所帮助！
答案 2 :(得分：0)
我发现控制台在$ this.button中抛出错误，说它不是函数，我改了。 此外，你获得ramdom的功能是错误的。 请看看这是否对您有所帮助
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar|Supermercado+One" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="head">
<h2>Random Quote Machine</h2>
</div>
</head>
<body>
<p></p>
<div class="boxed">
<p id="quote" >"Press New Quote Button for a random quote"</p>
<div class="btns">
<i class="fa fa-tumblr-square" style="font-size:36px;color:#0A4289"></i>
<i class="fa fa-twitter-square" style="font-size:36px;color:#07F5E7"></i>
<button type="button" class="btn-1" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Fetching">New Quote</button>
</div>
</div>
<br>
<div class="footer">
<p> <a class="link" href="https://codepen.io/natekicksa/">By:Nate</a></p>
</div>
</body>
</div>$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
答案 3 :(得分：0)
randQuote是来自
var randQuote = ((Math.random() * quotes[i].length-1) + 0);
例如35.4177225431459会导致切换到默认情况。您还应该使用整数来访问引号数组。
尝试Math.floor()：var randQuote = Math.floor(Math.random() * quotes.length);
您的开关盒也有点不必要，就像上面你现在可以做的那样
$('#quote').text(quotes[randQuote]);