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

在此过程中，重新创建一个名为Mastermind的游戏，当单击按钮时，我需要将ColorValues从一个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的ColorValues通过列以左至右的顺序复制到板内的"空间"divs，并在列中检查第一列是否已经包含值下一个，直到它可以将颜色值复制到一个空价值，确保转弯不要在第一列上重叠，而将其他九个空白。。"检查"按钮还需要检查输入代码是否与Comp对应。生成一个。（控制台内部可见一个阵列）尽管我还不到那部分。我还使计算机生成的代码中不可能具有两种相同的颜色，因此，如果在" ChooseColor" Div中选择了两种相同的颜色，我希望有一个错误消息。

检查输入代码并相应地出现黑白销（如果您知道策划者工作，您知道我的意思是什么）将是一个完全的问题，但必须等待对于另一个问题；）。

非常感谢大家真诚的，一个编程noob：）

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

alert(myDiv.style.backgroundColor);

相关内容

最新更新

热门标签：