【问题标题】：Randomize color pairs onclick (CSS, JavaScript)随机化颜色对 onclick (CSS, JavaScript)
【发布时间】：2021-10-08 14:08:02
【问题描述】：

我的网站上有一个按钮可以在点击时（同时）更改页面的背景颜色和标题文本颜色。更复杂的是，可能的颜色对（BG + 标题）应该是预先确定的，但是这些对本身应该是随机的，所以每次单击按钮时，您都会随机获得一个可能的颜色对。此外，不应连续两次获得相同的颜色对。

我该怎么做？

【问题讨论】：

避免问如何提问。

标签： javascript html css random colors

【解决方案1】：

样板 1

使用可能的颜色组合创建二维数组例如。 [[red,orange],[pink,purple]]
随机选择一个array[Math.floor(Math.random()*array.length)]
通过获取第 0 项或第 1 项 [RandomIndex][0] [RandomIndex][1]` 从给定索引中提取数据
将值附加到带有document.getElementById(id).style.property = new style 的html 元素
从数组中删除项目或创建一个新项目，在其中附加已使用的项目并使用.filter() 进行比较

样板 2

创建二维数组
创建一个与第一个数组相同的新数组，用于保存我们的可用对
如果可用对数组中有项目，请选择一个
通过删除选择对来更新可用项目
从对中获取颜色并将它们附加到 html

代码

let colorpairs = [
  ["#D49F14", "#FAA555"],
  ["#591647", "#C5008E"],
  ["#BFB41B", "#02733E"]
];
let avaiblePairs = colorpairs
const ChangeColors = () => {
  if (avaiblePairs.length) {
    let colorsChosen =
    avaiblePairs[Math.floor(Math.random() * colorpairs.length)];
    avaiblePairs = avaiblePairs.filter((e) => e !== colorsChosen);
    document.querySelector("#AG").style.color = colorsChosen[0];
    document.querySelector("body").style.backgroundColor = colorsChosen[1];
  } else {
    return "No avaible pairs of colors avaible";
  }
};

body {
  background: rgba(175, 159, 12, 1);
}

.whole {
  margin: 0 auto;
}

.top {
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 46px;
  margin-bottom: 179px;
  text-align: center;
}
h1 {
  margin: auto;
  font-family: Times New Roman;
  font-style: normal;
  font-weight: normal;
  font-size: 150px;
  line-height: 73px;
  text-align: center;
  letter-spacing: -0.1em;
  color: #C5008E;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.project {
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 0px;
  margin-bottom: 10px;
  border-top: 2px solid var(--black);
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

p {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 100%;
  width: 330px;
  letter-spacing: -0.05em;
  color: var(--black);
  margin-right: 51px;
  margin-top: 0;
  flex-basis: 20%
}

p.year {
  min-width: 40px;
  max-width: 100px;
  margin-right: 0px;
  flex-basis: 5%;
}

.slideshow {
  flex: 1;
}

.slideshow img{
  width: 800px;
  display: block;
  margin: auto;
}

.buttons-area {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.buttons {
  display: flex;
  gap: 67px;
  flex-direction: row;
}
.button {
  width: 288px;
  height: 93px;
  background: #C4C4C4;
  border: 1px solid var(--black);
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  text-align: center;
  padding-bottom: 5px;
  cursor: pointer;
}
h2 {
font-family: Times New Roman;
font-style: normal;
font-weight: normal;
font-size: 90px;
text-align: center;
letter-spacing: -0.1em;
color: var(--black);

margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

h2:hover {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

:root {
  --black: #232323;
}

<body>
  <div class="whole">
    <div class="top">
      <h1 id="AG">Andrei Gerasimov</h1>
    </div>

    <div class="project">
      <p><b>Visual identity for the Moscow Cosmist Museum</b> (Student project)<br><br>Moscow Cosmist Museum (MCM) is a fictional museum based on the philosophy of Russian cosmism. The cosmists were proto-avangardists: in XIX century they were writing about their goal to defeat nature and death. According to cosmists, a museum should become the main public institution in a society and a museum&rsquo;s aim should be the resurrection of the humanity&rsquo;s past.</p>
      <p class="year"><b>2020</b></p>
      <div class="slideshow">
        <img src="flag.jpg" style="width: 400px;">
      </div>
    </div>
    <div class="project">
      <p><b>Title</b><br><br>Text</p>
    </div>

    <div class="buttons-area">
      <div class="buttons">
        <div class="button"><h2>link</h2></div>
        <div onClick="ChangeColors()" class="button"><h2>click</h2></div>
      </div>
    </div>

  </div>
</body>

</html>

【讨论】：

我是个新手，所以我很快就被卡住了 :) 这是代码：codepen.io/andreigerasimov/pen/wvdxjJx。我需要右键（其中包含“单击”文本）来更改正文背景和
的颜色。我在 JS 数组中添加了一些颜色对作为示例，但我不知道如何按照您的步骤操作。
我现在有点忙，所以我稍后会检查代码，但您似乎无法从数组中随机获取两对。要实现该按钮，您需要将 js 代码包装在一个名为 onClick 的函数中。关于随机选择，请查看此链接：freecodecamp.org/news/… 它实现了一个随机报价生成器，这是从数组中获取项目的第一步。如果您不知道如何做特定的事情，请谷歌 :)
我添加了代码，如果您发现我的回答有用，请考虑投票和批准它（对我有帮助），同时提高线程的质量

【解决方案2】：

其实你的问题已经给出了你想要的答案。您描述问题的逻辑是正确的，因此只需将其实现为一行代码即可。并且基于上面的问题，下面是我的问题解决结果。

1.使用数组创建颜色列表

let color = ['red','green','blue','yellow','purple','pink','azure']

2。取按钮元素

const button = document.querySelector('.btn');

3.实现点击按钮时的逻辑

button.addEventListener('click', () => {
  let pickRandomColorP = Math.floor(Math.random()*color.length);
  document.body.style.background = color[pickRandomColorP]
})

您可以通过 this 链接中的 codepen 访问工作示例

【讨论】：

据我了解，您的解决方案适用于预先确定的颜色，但不适用于预先确定的颜色对。
这是我的代码codepen.io/andreigerasimov/pen/wvdxjJx。我需要右键（其中包含“单击”文本）来更改正文背景和
的颜色。我在 JS 数组中添加了一些颜色对作为示例。
你好@Andrei，我在这里更新我的解决方案codepen.io/nassardhi/pen/ZEKjrgv。主要思想是一样的，你只需要用按钮事件来操作DOM，也许你想看这篇博客freecodecamp.org/news/how-to-manipulate-the-dom-beginners-guide

【解决方案3】：

这样的东西可能适用于随机挑选部分。

<body>
    <headline>Hello world!</headline>
    <button onclick="setRandomColor()">Set random color</button>
</body>

<script>
    function setRandomColor() {
        const colors = [
            { headline: "red", background: "blue" },
            { headline: "yellow", background: "green" },
        ];

        const selected = colors[(Math.random() * colors.length) | 0];

        document.querySelector("headline").style.color = selected.headline;
        document.querySelector("body").style.background = selected.background;
    }
</script>

【讨论】：

样板 1

样板 2

代码

的颜色。我在 JS 数组中添加了一些颜色对作为示例，但我不知道如何按照您的步骤操作。

的颜色。我在 JS 数组中添加了一些颜色对作为示例。