Question

让我首先简要概述一下我的目标：我希望建立一个基于颜色的密码。更详细地说，有一个750x150px的盒子，里面装有两排150x150的正方形。每个方块随机分配10种颜色中的一种。目标是让用户以预设的相同顺序单击这些颜色。

我已经构建了css和html，并且确定每个div的背景颜色的php已经完成。我现在的问题是如何确定用户选择的div（以及颜色）以及选择的顺序。

我的目标是必须将颜色代码添加到网址，但我不知道该怎么做。有人可以解释如何做到这一点或其他方法来组织用户的颜色选择吗？

另外，出现另一个问题，我如何确保每种颜色都显示，但是在随机div中？目前有些人不会表现出来，因为其他人最终会出现在两个div中。

目前我的整个文档都在一个页面中，因此div颜色的变量可以用于索引中的一些if语句

因此，如果您对我有任何建议或代码，请提供帮助！

的index.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>

Answer 1

您是否特别需要跟踪网址中的点击次数？如果没有，更好的方法是在JS数组中静默跟踪进度

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

然后，点击3次后，sequence数组中将有3个条目--DIV的3个ID。

至于确保每种颜色只输出一次，这里的技巧不仅是从数组中拉出一个随机条目，而且之后将其从数组中删除，因此无法再次拾取它。

如果您稍后需要引用colors数组，那么您可能需要先复制它，因此。

$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();

根据点击事件向url添加变量

1 个答案: