让我先简要概述一下我的目标:我希望建立一个基于颜色的密码。更详细地说,有一个 750x150 像素的框,里面装满了两排 150x150 的正方形。这些方块中的每一个都被随机分配了 10 种颜色中的一种。目标是让用户以与预设相同的顺序单击这些颜色。
我已经构建了css和html,并且确定每个div的背景颜色的php是完整的。我现在面临的问题是如何确定用户选择哪些div(因此选择颜色)以及选择它们的顺序。
我的目标是必须将颜色代码添加到 url,但我不知道该怎么做。有人可以解释如何做到这一点或其他方法来组织用户的颜色选择吗?
另外,发生的另一个问题是,我如何确保显示每种颜色,但以随机div显示?因为目前有些不会显示,因为其他人最终会在两个div 中显示。
目前我的整个文档都在一页中,因此div 颜色的变量可用于索引中的某些 if 语句
因此,如果您对我有任何建议或代码,请提供帮助!
索引.php:
<?php "session_start" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>colorlock</title>
</head>
<style media="screen" type="text/css">
<?php
$background_colors = array(
"#FFFF00",
"#FF3399",
"#FF0000",
"#990099",
"#66FFFF",
"#339900",
"#000000",
"#000033",
"#FFFFCC",
"#FF3399",
);
$rand_background1 = $background_colors[array_rand($background_colors)];
$rand_background2 = $background_colors[array_rand($background_colors)];
$rand_background3 = $background_colors[array_rand($background_colors)];
$rand_background4 = $background_colors[array_rand($background_colors)];
$rand_background5 = $background_colors[array_rand($background_colors)];
$rand_background6 = $background_colors[array_rand($background_colors)];
$rand_background7 = $background_colors[array_rand($background_colors)];
$rand_background8 = $background_colors[array_rand($background_colors)];
$rand_background9 = $background_colors[array_rand($background_colors)];
$rand_background10 = $background_colors[array_rand($background_colors)];
?>
#full {
height: 300px;
width: 750px;
}
#boxone1 {
height: 150px;
width: 150px;
background: <?=$rand_background1?>;
float: left;
}
#boxone2 {
height: 150px;
width: 150px;
background: <?=$rand_background2?>;
float: left;
}
#boxone3 {
height: 150px;
width: 150px;
background: <?=$rand_background3?>;
float: left;
}
#boxone4 {
height: 150px;
width: 150px;
background: <?=$rand_background4?>;
float: left;
}
#boxone5 {
height: 150px;
width: 150px;
background: <?=$rand_background5?>;
float: left;
}
#boxtwo1 {
height: 150px;
width: 150px;
background: <?=$rand_background6?>;
float: left;
}
#boxtwo2 {
height: 150px;
width: 150px;
background: <?=$rand_background7?>;
float: left;
}
#boxtwo3 {
height: 150px;
width: 150px;
background: <?=$rand_background8?>;
float: left;
}
#boxtwo4 {
height: 150px;
width: 150px;
background: <?=$rand_background9?>;
float: left;
}
#boxtwo5 {
height: 150px;
width: 150px;
background: <?=$rand_background10?>;
float: left;
}
</style>
<body>
<div id="full">
<div id="boxone1" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxone2" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxone3" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxone4" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxone5" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxtwo1" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxtwo2" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxtwo3" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxtwo4" onclick="window.location='?name='+this.id" style=""></div>
<div id="boxtwo5" onclick="window.location='?name='+this.id" style=""></div>
</div>
</div>
<?php
if( $rand_background5 == $rand_background6)
{
echo ("that was lucky!");
}
else
{
echo ("that was expected!");
}
?>
</body>
</html>
您是否特别需要跟踪URL中的点击次数?如果没有,最好是在JS数组中静默跟踪进度
var sequence = [];
$('#full > div').on('click', function() {
sequence.push($(this).attr('id'));
});
然后,点击 3 次后,sequence
数组中将有 3 个条目 - DIV 的 3 个 ID。
至于确保每种颜色只输出一次,这里的诀窍不仅是从数组中提取一个随机条目,而且是在之后将其从数组中删除,这样它就不会再次被选中。
因此,如果您稍后需要引用颜色数组,则可能需要先获取它的副本。
$cols = array('#f00', '#00f', '#0f0', '#d70');
function getRandomColour() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
echo $rand_col;
unset($cols[$rand]);
}
echo getRandomColour();