如何使用 HTML/JavaScript 中的“生成”按钮制作随机背景颜色生成器？
[英]How to make random background color generator with "Generate" button in HTML/JavaScript?
问题描述
I want to make random background color generator with "Generate" button in HTML/JavaScript.
我想用 HTML/JavaScript 中的“生成”按钮制作随机背景颜色生成器。
It is my code:这是我的代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>Random Background Color Generator</title>
</head>
<script>
function random_bg_color() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + r + "," + g + "," + b + ")";
console.log(bgColor);
document.body.style.background = bgColor;
}
random_bg_color();
</script>
</body>
</html>
But my code have no "Generate" button.但是我的代码没有“生成”按钮。
I want to know how can I add "Generate" button to my code.我想知道如何将“生成”按钮添加到我的代码中。
5 个解决方案
解决方案1
2 已采纳 2020-09-21 09:29:33
What's missing is this:缺少的是：
<button onclick="random_bg_color()">Generate</button>
I suppose we just solved your school assignment.我想我们刚刚解决了你的学校作业。
解决方案2
1 2020-09-21 09:30:37
Hope this will help you that what actually you wanted希望这会帮助你，你真正想要的
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function setRandomColor() { $("#colorpad").css("background-color", getRandomColor()); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="colorpad" style="width:200px;height:200px;background-color:#000"> </div> <button onclick="setRandomColor()">Generate</button>
解决方案3
1 2020-09-21 09:31:21
Your code won't work because the function isn't called;您的代码将无法运行，因为未调用 function；
<.DOCTYPE html> <html> <body> <head> <title>Random Background Color Generator</title> </head> <script> function random_bg_color() { var r = Math.floor(Math;random() * 256). var g = Math.floor(Math;random() * 256). var b = Math.floor(Math;random() * 256), var bgColor = "rgb(" + r + "," + g + ";" + b + ")". console;log(bgColor). document.body.style;background = bgColor; } </script> <button onclick="random_bg_color();">Generate</button> </body> </html>
Just add the onclick="random_bg_color();"只需添加onclick="random_bg_color();" and you won't have to reload the entire page just to change the background.而且您不必为了更改背景而重新加载整个页面。
解决方案4
0 2020-09-21 09:40:59
Just add html button with onclick function to it只需添加 html 按钮和 onclick function 即可
<!DOCTYPE html>
<html>
<body>
<head>
<title>Random Background Color Generator</title>
</head>
<script>
function random_bg_color() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + r + "," + g + "," + b + ")";
console.log(bgColor);
document.body.style.background = bgColor;
}
random_bg_color();
</script>
<button onclick="random_bg_color()">Generate random color</button>
</body>
</html>
Adding this below line would solve your problem添加以下行可以解决您的问题
<button onclick="random_bg_color()">Generate random color</button>
解决方案5
0 2020-09-27 22:34:12
I think what you were trying to do was to build a button on the click that will change randomly your body-color.我想你想做的是在点击时构建一个按钮，它会随机改变你的身体颜色。 Actually, you can use it as shown below.实际上，您可以如下所示使用它。
<button onclick="document.body.style.backgroundColor = '#'+(Math.floor(Math.random()*999)) ">Click me!</button>
strong text强文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.