0

让我先简要概述一下我的目标：我希望建立一个基于颜色的密码。更详细地说，有一个 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>
4

1 回答 1

1

您是否特别需要跟踪 URL 中的点击？如果没有，最好在 JS 数组中静默跟踪进度

var sequence = [];
$('#full > div').on('click', function() {
    sequence.push($(this).attr('id'));
});

然后，单击 3 次后，数组中将有 3 个条目sequence- 3 个 DIV 的 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();
于 2012-07-05T01:14:35.530 回答