- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 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/
我正在编写一个应用程序,允许用户创建一个“问卷”,然后向其中添加问题。我正在使用核心数据来存储信息。我创建了一个问卷实体,并与问题实体建立了“一对多”关系。我的问题是,如果要允许用户复制(复制)整个调
有没有办法复制或复制 SharedPreference?或者我需要从一个变量中获取每个变量,然后将它们放入另一个变量中吗? 最佳答案 尝试这样的事情: //sp1 is the shared pref
下面的(A)和(B)有区别吗? (假设 NON ARC,如果重要的话) // --- (A) --- @interface Zoo : NSObject{} @property (copy) Dog
我正在尝试将 mysql SELECT 查询保存到文件中,如下所示: $result = mysqli_query($db,$sql); $out = fopen('tmp/csv.csv', 'w'
我需要创建一个 CVPixelBufferRef 的副本,以便能够使用副本中的值以按位方式操作原始像素缓冲区。我似乎无法使用 CVPixelBufferCreate 或 CVPixelBufferCr
我在 Source 文件夹中有一个 Active wave 录音 wave-file.wav。我需要使用新名称 wave-file-copy.wav 将此文件复制到 Destination 文件夹。
在使用 GNU Autotools 构建的项目中,我有一个脚本需要通过 make 修改以包含安装路径。这是一个小例子: configure.ac: AC_INIT(foobar, 1.0) AC_PR
我想将 SQL 的行复制到同一个表中。但是在我的表中,我有一个“文本”列。 使用此 SQL: CREATE TEMPORARY TABLE produit2 ENGINE=MEMORY SELECT
谁能给我解释一下 df2 = df1 df2 = df1.copy() df3 = df1.copy(deep=False) 我已经尝试了所有选项并执行了以下操作: df1 = pd.DataFram
Hazelcast 是否具有类似于 Ehcache 的复制? http://www.ehcache.org/generated/2.9.0/pdf/Ehcache_Replication_Guide.
我有以下拓扑。一个 Ubuntu 16.04。运行我的全局 MySQL 服务器的 Amazon AWS 上的实例。我想将此服务器用作许多本地主服务器(Windows 机器 MySQL 服务器)的从服务
使用 SQLyog,我正在测试表中是否设置了正确的值。我尝试过 SELECT type_service FROM service WHERE email='test@gmail.com' 因此,只输出
有人可以提供一些关于如何配置 ElasticSearch 进行复制的说明。我在 Windows 中运行 ES,并且了解如果我在同一台服务器上多次运行 bat 文件,则会启动一个单独的 ES 实例,并且
一 点睛 ThreadGroup 复制线程的两个方法。 public int enumerate(Thread list[]) // 会将 ThreadGroup 中的 active 线程全部复制到
一 点睛 ThreadGroup 复制线程组的两个方法。 public int enumerate(ThreadGroup list[]) // 相对于 enumerate(list,true) pu
官方documentation Cassandra 说: Configure the keyspace and create the new datacenter: Use ALTER KEYSPAC
This question already has answers here: How to weight smoothing by arbitrary factor in ggplot2? (2个答
我们有一个表格来表明对各种俱乐部的兴趣。输出将数据记录在 Excel 电子表格中,其中列有他们的首选姓名、姓氏、电子邮件、代词,以及他们感兴趣的俱乐部的相应列中的“1”(下面的模型)。 我们希望为俱乐
This question already has answers here: Closed 8 years ago. Possible Duplicate: In vim, how do I get
如何复制形状及其所在的单元格?当我手动复制时,形状会跟随单元格,但是当我使用宏进行复制时,我会得到除形状之外的所有其他内容。 Cells(sourceRow, sourceColumn).Copy C
我是一名优秀的程序员,十分优秀!