Javascript 尝试在文档中生成随机背景色就绪
每次加载web应用程序和每次按下“New Quote”(新报价)按钮时,我都会尝试将其背景设置为随机颜色。我用来生成随机背景色的函数是Javascript 尝试在文档中生成随机背景色就绪,javascript,jquery,css,html,codepen,Javascript,Jquery,Css,Html,Codepen,每次加载web应用程序和每次按下“New Quote”(新报价)按钮时,我都会尝试将其背景设置为随机颜色。我用来生成随机背景色的函数是random\u bg\u color() 我在$(document.ready(function(){})中调用了它。我正在使用codepen.io创建此web应用程序。指向我的web应用程序的链接为。目前,页面仅加载“白色”作为背景色。任何关于如何解决此问题的反馈都将不胜感激 <!DOCTYPE html> <html lan
random\u bg\u color()
我在$(document.ready(function(){})
中调用了它。我正在使用codepen.io创建此web应用程序。指向我的web应用程序的链接为。目前,页面仅加载“白色”作为背景色。任何关于如何解决此问题的反馈都将不胜感激
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Random Quote Getter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style>
#new-quote-btn {
}
</style>
</head>
<body translate="no" >
<div class='container-fluid'>
<button id='new-quote-btn'>New Quote</button>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/js/fontawesome-iconpicker.js'></script>
<script>
$(document).ready(function() {
random_bg_color();
document.getElementById("#new-quote-btn").addEventListener("click", random_bg_color);
});
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
console.log(bgColor);
document.body.style.background = bgColor;
}
</script>
</body>
</html>
CodePen-随机引用获取程序
#新报价{
}
新报价
$(文档).ready(函数(){
随机_bg_color();
document.getElementById(“#新引号btn”).addEventListener(“单击”,随机的背景颜色);
});
函数random_bg_color(){
var x=Math.floor(Math.random()*256);
var y=Math.floor(Math.random()*256);
var z=Math.floor(Math.random()*256);
var bgColor=“rgb(“+x+”、“+y+”、“+z+”);
console.log(bgColor);
document.body.style.background=bgColor;
}
您需要添加一个到JQuery的链接,如前所述,并且您的getElementById的选择器不正确,因此没有添加任何事件侦听器。拆下#,它就会工作-
document.getElementById("new-quote-btn").addEventListener("click", random_bg_color);
因为您使用的是JQuery,所以可以使用此代码附加事件侦听器-
$("#new-quote-btn").on("click", function() {
random_bg_color();
});
如前所述,您需要添加到JQuery的链接,并且getElementById的选择器不正确,因此不会添加任何事件侦听器。拆下#,它就会工作-
document.getElementById("new-quote-btn").addEventListener("click", random_bg_color);
因为您使用的是JQuery,所以可以使用此代码附加事件侦听器-
$("#new-quote-btn").on("click", function() {
random_bg_color();
});
在
标记中添加jQuery CDN。见下文第10行。添加jQuery后,我可以看到它在您的代码笔中工作
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Random Quote Getter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#new-quote-btn {
}
</style>
</head>
在
标记中添加jQuery CDN。见下文第10行。添加jQuery后,我可以看到它在您的代码笔中工作
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Random Quote Getter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#new-quote-btn {
}
</style>
</head>
这看起来像是一个家庭作业。可能重复您在哪里添加了jQuery CDN?这看起来像是一个家庭作业。可能重复您在哪里添加了jQuery CDN?非常感谢!我是网络开发新手,所以这对我帮助很大!非常感谢你!我是网络开发新手,所以这对我帮助很大!非常感谢你!我是网络开发新手,所以这对我帮助很大!没问题@nicktsan:)非常感谢!我是网络开发新手,所以这对我帮助很大!没问题@nicktsan:)