Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Color por cada div en una sesión

preguntó
Web
590 Vistas
2 Respuestas
solucionada

El caso es que he llegado a una conclusión, y es que en una sesión se asigne por div un color (ya que es una interfaz metro) por el momento lo tengo funcional pero asigna el color a todos los div y opino que es cosa del script en php.

Eso espero que podáis ayudarme. Os dejo el código.

Código completo:

<?php 

class colorines{
}
session_start();
if (!isset($_SESSION['color'])) {
    $colores = array("color1","color2","color3","color4","color5","color6","color7","color8");        
    $_SESSION['color'] = $colores[array_rand($colores,1)];
    $_SESSION['cont'] = 1;
} else {
    $_SESSION['cont']++;
} 
?>
    <!DOCTYPE html>
    <html lang="en">
    <script>
        var n = 0;

        function changeBackground() {
            while (n < 10) {
                if (n == 10) {
                    n = 0;
                }
                var myElements = document.querySelectorAll('.prueba' + n);
                for (var i = 0; i < myElements.length; i++) {
                    myElements[i].classList.add("<?php print($_SESSION['color']);?>");
                }
                n++;
            }

        }
        window.onload = changeBackground;
    </script>

    <head>
        <?php header('Content-Type: text/html; charset=UTF-8'); ?>
            <meta charset="utf-8">
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
            <title>Integral | MOBI</title>
            <link rel="stylesheet" href="css/integral.css" type="text/css">
            <link rel="stylesheet" href="css/animate.css" type="text/css">
            <script src="js/jquery-1.11.3.min.js" type="application/javascript"></script>
    </head>

    <body>

        <div class="container">
            <div class="prueba0"></div>
            <div class="prueba1"></div>
            <div class="prueba2"></div>
            <div class="prueba3"></div>
            <div class="prueba4"></div>
            <div class="prueba5"></div>
            <div class="prueba6"></div>
            <div class="prueba7"></div>
            <div class="prueba8"></div>
            <div class="prueba9"></div>
        </div>

    </body>

    </html>

¿Como se haría para que repartiera color por "consulta" o bucle?
Un saludo y muchas gracias por todo!

por SynSor (490 puntos) en Web

0voto

carlossevi comentado

¿Qué utilidad tiene el bucle while? ¡Has hecho un bucle infinito del que nunca se sale!

while (n < 10) {
    if (n == 10) {
        n = 0;
    }
    // ...
    n++;
}

Por estar seguro de lo que preguntas ¿quieres que a cada clase (prueba1, prueba2...) se le asigne un color aleatoriamente?

¿Puedes concretar a qué te refieres por "consulta"? Para mi estas dos frases son contradictorias: "que se repartan los colores por consulta" y que "se mantenga en cada sesión".

por carlossevi (63.580 puntos)

0voto

SynSor comentado

Con consulta me refiero cada vez que se solicite(por div un color), y sí, me salió un bucle infinito sin querer porque no hay forma de hacer que llegue a cero, entonces el "prueba0" se quedaría sin color. Pero nada de que preocuparse ya que le asigno otros número y ya está.

<?php 

class colorines{
}
session_start();
if (!isset($_SESSION['color'])) {
    $colores = array("color1","color2","color3","color4","color5","color6","color7","color8");        
    $_SESSION['color'] = $colores[array_rand($colores,1)];
    $_SESSION['cont'] = 1;
} else {
    $_SESSION['cont']++;
} 
?>
    <!DOCTYPE html>
    <html lang="en">
    <script>
        var n = 0;

        function changeBackground() {
            while (n < 11) {
                var myElements = document.querySelectorAll('.prueba' + n);
                for (var i = 0; i < myElements.length; i++) {
                    myElements[i].classList.add("<?php print($_SESSION['color']);?>");
                }
                n++;
            }

        }
        window.onload = changeBackground;
    </script>

    <head>
        <?php header('Content-Type: text/html; charset=UTF-8'); ?>
            <meta charset="utf-8">
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
            <title>Integral | MOBI</title>
            <link rel="stylesheet" href="css/integral.css" type="text/css">
            <link rel="stylesheet" href="css/animate.css" type="text/css">
            <script src="js/jquery-1.11.3.min.js" type="application/javascript"></script>
    </head>

    <body>

        <div class="container">
            <div class="prueba1"></div>
            <div class="prueba2"></div>
            <div class="prueba3"></div>
            <div class="prueba4"></div>
            <div class="prueba5"></div>
            <div class="prueba6"></div>
            <div class="prueba7"></div>
            <div class="prueba8"></div>
            <div class="prueba9"></div>
            <div class="prueba10"></div>
        </div>

    </body>

    </html>
por SynSor (490 puntos)

2 Respuestas

1voto

carlossevi Puntos63580

En primer lugar, suponemos que mantienes un fichero con las clases, yo le he llamado colors.css:

.prueba0,
.prueba1,
.prueba2,
.prueba3,
.prueba4,
.prueba5,
.prueba6,
.prueba7,
.prueba8,
.prueba9 {
    margin: 5px;
    padding: 5px;
    width: 300px;
    height: 300px;
    float: left;
    border-radius: 2px;
}

.color1{background: #2ecc71;}
.color2{background: #e67e22;}
.color3{background: #3498db;}
.color4{background: #9b59b6;}
.color5{background: #f1c40f;}
.color6{background: #1abc9c;}
.color7{background: #008299;}
.color8{background: #e74c3c;}

Ahora vamos a ver cómo quedaría el PHP (he intentado comentarlo, si no entiendes algo lo vemos):

<?php 
// Iniciar SESSION
session_start();
// Array con todas las clases:
$clasesdiv = array("prueba0","prueba1","prueba2","prueba3","prueba4","prueba5","prueba6","prueba7","prueba8","prueba9");
// Si la variable de sesion no existe, se fija el color    
if (!isset($_SESSION['colores'])) {
    // Array con los colores a "sortear"
    $clasescolores = array("color1","color2","color3","color4","color5","color6","color7","color8");
    // Hacemos el sorteo:
    foreach ($clasesdiv as $clase)
        $_SESSION['colores'][$clase] = $clasescolores[array_rand($clasescolores,1)];   
}
?>
<!DOCTYPE html>
<html lang="en">
<script>        
    // Una función que ayuda a asignar clases extra a los div, seleccionando por clase:
    function asignarClase2Clase(clase_seleccion,clase_asignar) {
        var myElements = document.querySelectorAll('.' + clase_seleccion);
        for (var i = 0; i < myElements.length; i++) {
            myElements[i].classList.add(clase_asignar);
        }
    }
    // Esta función es la que hace la asignación. 
    // La función se genera dinámicamente mediante PHP:
    function asignarColores() {         
        <?php           
        foreach ($clasesdiv as $clase)
            echo "asignarClase2Clase('$clase','".$_SESSION['colores'][$clase]."');";
        ?>
    }
    // Hacer que la función se ejecute al inicio:
    window.onload = asignarColores;
</script>
<head>
    <?php header('Content-Type: text/html; charset=UTF-8'); ?>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
    <title>Integral | MOBI</title>
    <link rel="stylesheet" href="colors.css" type="text/css">
</head>

<body>
    <div class="container">
        <div class="prueba0">prueba0</div>
        <div class="prueba1">prueba1</div>
        <div class="prueba2">prueba2</div>
        <div class="prueba3">prueba3</div>
        <div class="prueba4">prueba4</div>
        <div class="prueba5">prueba5</div>
        <div class="prueba6">prueba6</div>
        <div class="prueba7">prueba7</div>
        <div class="prueba8">prueba8</div>
        <div class="prueba9">prueba9</div>
    </div>
</body>
</html>

El código es largo para que pueda funcionar, pero la parte interesante esté en la parte de PHP y las funciones de JS.

por carlossevi (63.580 puntos)
seleccionada por

0voto

SynSor comentado

Pues muchas gracias por tu ayuda desde el principio, funciona de maravilla por el momento. Un saludo!

por SynSor (490 puntos)

2votos

MitsuGami Puntos8010

Si bien he entendido, lo que quieres hacer es que al iniciar sesión un usuario, el sistema le asigne un color aleatorio entre n existentes. Si es así, entonces basta con lo siguiente:

/*
 * Script 'session_utils.php'
 *
 * Se llamará a este script para inicializar valores luego de iniciar sesión
 */

$colors = array("green", "blue", "purple", "orange", "yellow", "red"); 
// índice aleatorio para un color
$randomIndexColor = rand(0, count($colors)-1);
// color aleatorio obtenido
$randomColor = $colors[$randomIndexColor];
// se le asigna el color a la sesión de usuario
$_SESSION["userLogged"]["primaryColor"] = $randomColor;

Y le agregas el color como clase CSS al div:

var div = document.querySelector('.prueba');
div.classList.add("<?=$_SESSION['userLogged']['primaryColor']?>");
por MitsuGami (8.010 puntos)

0voto

SynSor comentado

Gracias por tu solución, pero mi verdadera intención era un color por div en una sesión.

por SynSor (490 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta