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

2votos

Cambiar background por "sesiones"

Buenas, el caso es que estoy haciendo una interfaz "metro" en html y css (cosas que se me dan muy bien). El js y php los controlo para cosas muy específicas y no sé como hacer un script que por cada consulta a la web los div se cambien de color, pero no aleatoriamente con números hexa. Quiero que sea aleatorio pero entre unos 8 colores que tengo preparados.

Muchas gracias de antemano y saludos!

0voto

carlossevi comentado

Diferenciación importante: ¿que se cambie "por sesiones" o "aleatoriamente" en cada petición al servidor? Nombras las dos cosas y no queda totalmente claro.

Es decir, ¿quieres que a una visita se le asigne un color durante toda la sesión o que cada vez que se recarga la página lo haga con un color diferente entre tu colección de posibilidades?

0voto

SynSor comentado

Me refiero a que por cada visita se le asigne un color durante toda la sesión de la colección de colores que poseo.

Perdón por la confusión y gracias por responder.

Un saludo!

1 Respuesta

4votos

carlossevi Puntos63580

Te hago un ejemplo de cómo quedaría un código PHP simplificado al máximo.

  • Utiliza un array con la lista de posibles colores y selecciona uno aleatoriamente
  • Utiliza funciones de sesión propias de PHP

Se me han ocurrido varias opciones:

  1. Que el script PHP genere la hoja CSS personalizada para la sesión, pero no me gusta porque el CSS entonces se vuelve más complejo de mantener..
  2. Que el script PHP genere el HTML escribiendo directamente el color en el HTML, pero no me parece limpio porque no separa la capa de presentación de los datos.
  3. Que el script PHP genere una función Javascript que cambia el color de la página al mostrarse. He elegido esta opción.

También he puesto un pequeño contador a la sesión para hacer pruebas.

<?php 
// Iniciar SESSION
session_start();
if (!isset($_SESSION['color'])) {
    // Si la variable de sesión no existe, se fija el color e 
    // inicia el contador de cargas:
    $colores = array("red","orange","yellow");           
    $_SESSION['color'] = $colores[array_rand($colores,1)];
    $_SESSION['cont'] = 1;
} else {
    // Si ya existía, solo se incrementa el contador:
    $_SESSION['cont']++;
}
?>
<html>
    <script>
    function changeBackground() {
       document.body.style.background = '<?php print($_SESSION['color']);?>';
    }
    </script>
    <body onload="changeBackground();">
        Se ha mostrado el color <?php print($_SESSION['cont']);?> veces.
    </body>
</html>

Para destruir la sesión y hacer pruebas puedes ejecutar:

<?php
session_start();
var_dump($_SESSION);
session_destroy();
?>

0voto

SynSor comentado

OK! El caso es que antes trabajaba en Dreamweaver y efectivamente el id era para el "#" y el class para ".". Cuando dí el salto a un Open Source como lo es "brackets" cuando asignaba clases o id's no me funcionaban, fue entonces cuando probé a cambiar, y por arte de magia funciono, entonces, no de dí importancia hasta el día de hoy.

Ya todo funciona correctamente. Muchas gracias por todo y perdón por las molestias, postearé luego mi verdadera meta.

PD: He venido y me quedo por aquí!

0voto

SynSor comentado

Mi intención desde un principio era que cada DIV tuviera su propio color, con el script que "desarrollamos" arriba funcionaba, pero a todos los div les daba el mismo color. Entonces incluí un bucle en el código JS:

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;

Pero sigue sin funcionar, por lo tanto creo que es problema del script en php que "sortea" un color y lo mantiene.

¿Como se haría para que repartiera color por "consulta" o bucle?

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>

Un saludo y muchas gracias por todo!

0voto

carlossevi comentado

Yo eliminaría este comentario y crearía una pregunta nueva o pregunta relacionada (tienes el botón en la parte inferior de la respuesta) porque este hilo puede ser infinito y la final el tema va derivando y hablando de cosas no relacionadas con lo que preguntabas.

Tu pregunta original ya está respondida con algo que funciona y un visitante futuro podría utilizar en caso de tener el mismo problema. Si te parece puedes iniciar un nuevo hilo para preguntar todo lo que quieras, porque te recuerdo la primera aclaración que hicimos sobre esta pregunta:

Es decir, ¿quieres que a una visita se le asigne un color durante toda la sesión o que cada vez que se recarga la página lo haga con un color diferente entre tu colección de posibilidades?

Me refiero a que por cada visita se le asigne un color durante toda la sesión de la colección de colores que poseo.

Ahora ya sabes cómo asignar un color aleatorio desde PHP, guardarlo en la sesión y cambiarlo mediante JS en cada generación de la página. ¡Vamos a por el siguiente reto!

0voto

Peter comentado

@SynSor como dice @carlossevi para dudas nuevas, por favor abre preguntas nuevas. Así todo será claro para todos.

Saludos.

1voto

SynSor comentado

Entiendo, pueden proceder a eliminar los comentarios!

Un saludo!

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

Otras Preguntas y Respuestas


...

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

Conecta