如何用按钮生成不同的颜色 [英] How to generate different colours with button

问题描述

我是初学者，想知道如何使用生成按钮生成所有不同的颜色?按钮 addEventListener 的第二个参数要添加什么?

另外，如何让它在刷新时自动生成颜色而不是没有颜色?

var getcolors = document.querySelectorAll(".palette").forEach(function(btn) {btn.addEventListener("点击", function() {var n = Math.random();n = n * 256；n = Math.floor(n);var a = Math.random();a = a * 256;a = Math.floor(a);var b = Math.random();b = b * 256；b = Math.floor(b);var color = "rgb(" + n + "," + a + "," + b + ")";btn.style.backgroundColor = 颜色；});});document.getElementById("generate").addEventListener("click", function() {});

body {文本对齐:居中；背景颜色:黑色；}.调色板{大纲:无；边框:10px 实心 #404b69;字体大小:5rem；行高:1；字体粗细:900；颜色:#da0463；文本阴影:3px 0 #dbdf3;边框半径:15px；显示:内联块；宽度:110px；高度:110px；文本对齐:居中；边距:5px；背景颜色:白色；}

<h1 id="title">调色板</h1><div class="set"><button id="a" class="一个调色板">a</button><button id="b" class="b调色板">b</button><button id="c" class="c调色板">c</button><button id="d" class="d调色板">d</button>

<div><button id="generate">generate</button>

解决方案

如果我们将颜色代码添加到一个函数中，我们称之为 setColors，我们可以在页面渲染时调用该函数，当按钮按下时:

function setColors() {//色标}//启动时运行设置颜色()//点击按钮运行document.getElementById("generate").addEventListener("click", setColors);

片段:

function setColors() {document.querySelectorAll(".palette").forEach(function (btn) {var n = Math.random();n = n * 256；n = Math.floor(n);var a = Math.random();a = a * 256;a = Math.floor(a);var b = Math.random();b = b * 256；b = Math.floor(b);var color = "rgb(" + n + "," + a + "," + b + ")";btn.style.backgroundColor = 颜色；});}//启动时运行设置颜色()//点击按钮运行document.getElementById("generate").addEventListener("click", setColors);

body {文本对齐:居中；背景颜色:黑色；}.调色板{大纲:无；边框:10px 实心 #404b69;字体大小:5rem；行高:2；字体粗细:900；颜色:#da0463；文本阴影:3px 0 #dbdf3;边框半径:15px；显示:内联块；宽度:150px；高度:150px；文本对齐:居中；边距:10px；背景颜色:白色；}

<h1 id="title">调色板</h1><div class="set"><button id="a" class="一个调色板">a</button><button id="b" class="b调色板">b</button><button id="c" class="c调色板">c</button><button id="d" class="d调色板">d</button>

<div><button id="generate">generate</button>

I am a beginner and want to know how I can generate all different colours with the generate button? What do I add to the second parameter of the button addEventListener?

Also, how do I make it generate colours automatically on refresh instead of no colours?

var getcolors = document.querySelectorAll(".palette").forEach(function(btn) {
  btn.addEventListener("click", function() {
    var n = Math.random();
    n = n * 256;
    n = Math.floor(n);
    var a = Math.random();
    a = a * 256;
    a = Math.floor(a);
    var b = Math.random();
    b = b * 256;
    b = Math.floor(b);
    var color = "rgb(" + n + "," + a + "," + b + ")";
    btn.style.backgroundColor = color;
  });
});

document.getElementById("generate").addEventListener("click", function() {});

body {
  text-align: center;
  background-color: black;
}

.palette {
  outline: none;
  border: 10px solid #404b69;
  font-size: 5rem;
  line-height: 1;
  font-weight: 900;
  color: #da0463;
  text-shadow: 3px 0 #dbedf3;
  border-radius: 15px;
  display: inline-block;
  width: 110px;
  height: 110px;
  text-align: center;
  margin: 5px;
  background-color: white;
}

<h1 id="title">Color Palette</h1>
<div class="set">
  <button id="a" class="a palette">a</button>
  <button id="b" class="b palette">b</button>
  <button id="c" class="c palette">c</button>
  <button id="d" class="d palette">d</button>
</div>

<div>
  <button id="generate">generate</button>

</div>

解决方案

If we add the color-code to a function, lets call it setColors, we can call that funcion on page-render, and when the button is pressed like so:

function setColors() {
    // Color code
}

// Run on start
setColors()

// Run on button click
document.getElementById("generate").addEventListener("click", setColors);

Snippet:

function setColors() {
  document.querySelectorAll(".palette").forEach(function (btn) {
    var n = Math.random();
    n = n * 256;
    n = Math.floor(n);
    var a = Math.random();
    a = a * 256;
    a = Math.floor(a);
    var b = Math.random();
    b = b * 256;
    b = Math.floor(b);
    var color = "rgb(" + n + "," + a + "," + b + ")";
    btn.style.backgroundColor = color;
  });
}

// Run on start
setColors()

// Run on button click
document.getElementById("generate").addEventListener("click", setColors);

body {
  text-align: center;
  background-color: black;
}

.palette {
  outline: none;
  border: 10px solid #404b69;
  font-size: 5rem;
  line-height: 2;
  font-weight: 900;
  color: #da0463;
  text-shadow: 3px 0 #dbedf3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}

<h1 id="title">Color Palette</h1>
<div class="set">
  <button id="a" class="a palette">a</button>
  <button id="b" class="b palette">b</button>
  <button id="c" class="c palette">c</button>
  <button id="d" class="d palette">d</button>
</div>

<div>
  <button id="generate">generate</button>

</div>

这篇关于如何用按钮生成不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！