javascript - 如何将颜色值从一个 div 复制到另一个？

标签 javascript jquery html css

在重新创建名为 mastermind 的游戏的过程中，我需要在单击按钮时将颜色值从一个 div 复制到另一个 div。尽管我对如何使用 javascript 执行此操作感到困惑。虽然我没有遇到过类似情况的人，但我已经浏览过网络。我会把我的代码粘贴在下面，这样你们就可以看看它，也许可以找出一种有效的方法来做到这一点。

这是我的代码:

 var color = ["red", "blue", "yellow", "white", "black", "green", "orange", "magenta"];

 function generateCode() {
   var picked = [];
   while (picked.length < 4) {
     var index = parseInt(Math.random() * color.length, 0);
     var c = color[index];
     if (picked.indexOf(c) == -1) {
       picked.push(c);
     }

   }
   return picked;
 }

 $(function() {
   var pickedCode = generateCode();
   console.log(pickedCode);

   var indices = [];
   $('.pickcolor').on('click', function(e) {
     var index = indices[e.target.id] ? indices[e.target.id] : 0;
     var currentColor = color[index];
     $(e.target).css('background-color', currentColor)
       .data('data-color', currentColor);
     index = index + 1 >= color.length ? 0 : index + 1;
     indices[e.target.id] = index;
   });

   $('#checkButton').on('click', function() {
     var entry = [
       $('#choosecolor0').data('data-color'),
       $('#choosecolor1').data('data-color'),
       $('#choosecolor2').data('data-color'),
       $('#choosecolor3').data('data-color')
     ];

     if (entry.indexOf(undefined) > -1) {
       alert('Je hebt nog geen vier kleuren gekozen');
       return;
     }

   });
 });
body {
  overflow: auto;
  background-color: lightgrey;
  height: 99%;
  width: 99%;
}
div {
  border: 2px solid black;
}
.infobar {
  height: 598px;
  width: 200px;
  right: 50%;
  overflow: hidden;
  position: absolute;
  top: 5%;
  right: 0%;
  background-color: white;
}
.button {
  height: 70px;
  width: 300px;
  position: absolute;
  font-size: 36px;
  top: 11%;
  left: 25%;
  background-color: white;
}
.turn {
  float: left;
  width: 65px;
  height: 350px;
  border: 0px;
}
.colorpin {
  float: left;
  width: 14px;
  height: 14px;
  background-color: gray;
  margin: 3px;
}
.spacex {
  float: left;
  width: 50px;
  height: 50px;
  margin: 6px;
}
.colorfield {
  float: left;
  width: 65px;
  height: 65px;
  background-color: white;
  margin: 10px;
  margin-left: 15px;
}
#board {
  width: 652px;
  height: 330px;
  margin: auto;
  background-color: darkgrey;
  position: absolute;
  top: 25.5%;
  left: 25%;
}
#turn-interactive {
  width: 100px;
  height: 357px;
  background-color: white;
  margin: auto;
  margin-bottom: 10px;
  position: absolute;
  top: 28%;
  left: 15%
}
.turnint {
  width: 70px;
  height: 265px;
  border: 2px solid black;
  position: absolute;
  top: 36%;
  left: 17%;
}
.footer {
  width: 80%;
  position: absolute;
  left: 3%;
  top: 87%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Master Mind</title>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>


<div id="turn-interactiv" class="turnint">
  <div id="choosecolor0" class="spacex pickcolor"></div>
  <div id="choosecolor1" class="spacex pickcolor"></div>
  <div id="choosecolor2" class="spacex pickcolor"></div>
  <div id="choosecolor3" class="spacex pickcolor"></div>
</div>

<button type="button" id="checkButton" class="button">Check!</button>

<div id="board">
  <div id="turn0" class="turn">
    <div id="scorediv0" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space0-0" class="spacex"></div>
    <div id="space0-1" class="spacex"></div>
    <div id="space0-2" class="spacex"></div>
    <div id="space0-3" class="spacex"></div>
  </div>
  <div id="turn1" class="turn">
    <div id="scorediv1" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space1_0" class="spacex"></div>
    <div id="space1_1" class="spacex"></div>
    <div id="space1_2" class="spacex"></div>
    <div id="space1_3" class="spacex"></div>
  </div>
  <div id="turn2" class="turn">
    <div id="scorediv2" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space2-0" class="spacex"></div>
    <div id="space2-1" class="spacex"></div>
    <div id="space2-2" class="spacex"></div>
    <div id="space2-3" class="spacex"></div>
  </div>
  <div id="turn3" class="turn">
    <div id="scorediv3" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space3-0" class="spacex"></div>
    <div id="space3-1" class="spacex"></div>
    <div id="space3-2" class="spacex"></div>
    <div id="space3-3" class="spacex"></div>
  </div>
  <div id="turn4" class="turn">
    <div id="scorediv4" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space4-0" class="spacex"></div>
    <div id="space4-1" class="spacex"></div>
    <div id="space4-2" class="spacex"></div>
    <div id="space4-3" class="spacex"></div>
  </div>
  <div id="turn5" class="turn">
    <div id="scorediv5" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space5_0" class="spacex"></div>
    <div id="space5_1" class="spacex"></div>
    <div id="space5_2" class="spacex"></div>
    <div id="space5_3" class="spacex"></div>

  </div>
  <div id="turn6" class="turn">
    <div id="scorediv6" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space6-0" class="spacex"></div>
    <div id="space6-1" class="spacex"></div>
    <div id="space6-2" class="spacex"></div>
    <div id="space6-3" class="spacex"></div>

  </div>
  <div id="turn7" class="turn">
    <div id="scorediv7" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space7_0" class="spacex"></div>
    <div id="space7_1" class="spacex"></div>
    <div id="space7_2" class="spacex"></div>
    <div id="space7_3" class="spacex"></div>
  </div>
  <div id="turn8" class="turn">
    <div id="scorediv8" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space8_0" class="spacex"></div>
    <div id="space8_1" class="spacex"></div>
    <div id="space8_2" class="spacex"></div>
    <div id="space8_3" class="spacex"></div>
  </div>
  <div id="turn9" class="turn">
    <div id="scorediv9" class="spacex">
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
      <div id="colorpin" class="colorpin"></div>
    </div>
    <div id="space9_0" class="spacex"></div>
    <div id="space9_1" class="spacex"></div>
    <div id="space9_2" class="spacex"></div>
    <div id="space9_3" class="spacex"></div>
  </div>
</div>
<aside>
  <div id="infobar" class="infobar">
    <h1>highscore:</h1>
  </div>`</aside>`
<div id="info" class="footer">
  <footer>
    <p>Jorden Diele</p>
  </footer>
</div>

</body onload="restart()">

</html>

我想要发生的是，当我按下“检查!”按钮，“选择颜色”div 的颜色值被复制到板内的“空间”div，按从左到右的顺序，在列中并让它检查第一列是否已经包含值，如果它检查下一个，直到它可以将颜色值复制到一个空的值，确保转弯不重叠在第一列上并将其他九个留空。 . “检查”按钮还需要检查输入的代码是否与comp 对应。生成一个。 (控制台内可见的数组)虽然我还没有完全了解那部分。我还让计算机生成的代码中不可能有两种相同的颜色，所以如果在“choosecolor”div 中选择了两种相同的颜色，我希望有一条错误消息。

检查输入代码并使黑色和白色引脚相应地出现(如果你知道策划者的工作你就会明白我的意思)本身将是一个完全不同的问题，但这将不得不等待另一个问题；)。

非常感谢大家， 您真诚的，编程菜鸟:)

最佳答案

使用 JavaScript，您可以轻松获取颜色值:

alert(myDiv.style.backgroundColor);

关于javascript - 如何将颜色值从一个 div 复制到另一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38054403/

上一篇：html - 我可以在表单组中包含标题吗？

下一篇：javascript - 搜索标记颜色

相关文章：

javascript - 无法自定义交互式 JavaScript 内容

javascript - 结合 jQuery PreventDefault 和所需的表单输入

html - 与表格重叠的 div

html - 将 HTML 拆分为虚拟页面

javascript - 我可以使用 jQuery 定位多个事件的子选择器吗

html - 需要在 div 中垂直居中图像，但此处找到的答案不起作用

javascript - Electron JS - 深度链接 - 如何使用深度链接的示例

javascript - md-virtual-repeat 按给定数量

javascript - jquery ui 弹跳效果导致元素错位

javascript - iScroll 不允许点击元素

©2024 IT工具网  联系我们