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

时间：2016-06-27 12:48:23

标签： 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>

我想要发生的是当我按下“检查！”时按钮，“choosecolor”div的颜色值被复制到电路板内的“space”div，按照从左到右的顺序，在列中检查第一列是否已包含值，如果是，则检查下一个，直到它可以将颜色值复制到空的一个，确保转弯不会重叠在第一列上，而将其他九个留空。 。 “检查”按钮还需要检查输入代码是否与comp相对应。生成一个。 （在控制台内部可见一个数组）虽然我还不是那个部分。我也没有在计算机生成的代码中使用两种相同的颜色，所以如果在“choosecolor”div中选择了两种相同的颜色，我希望有一条错误信息。

检查输入代码并且相应地显示黑色和白色针脚（如果你知道策划者工作你会知道我的意思）将是一个完全没有问题的自我，但那将不得不等待另一个问题;）。

感谢所有人，非常感谢 您诚挚的，编程菜鸟：）

1 个答案:

答案 0 :(得分：1)

使用JavaScript，您可以轻松获得颜色值：

alert(myDiv.style.backgroundColor);
相关问题
最新问题