entre Desarrolladores

Question

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!

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?
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!

Answer 1

1 Respuestas

SynSor · Answer 2 · 2015-11-17T06:53:50+0000

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:

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..
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.
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();
?>

respondido por carlossevi (63.580 puntos) Nov 17, 2015

seleccionada por SynSor Nov 18, 2015

Mostrar 16 comentarios previos

0voto

SynSor comentado Nov 24, 2015

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í!

comentado por SynSor (490 puntos) Nov 24, 2015

0voto

SynSor comentado Nov 24, 2015

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!

comentado por SynSor (490 puntos) Nov 24, 2015

editado por SynSor Nov 25, 2015

0voto

carlossevi comentado Nov 24, 2015

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!

comentado por carlossevi (63.580 puntos) Nov 24, 2015

0voto

Peter comentado Nov 24, 2015

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

Saludos.

comentado por Peter (150.460 puntos) Nov 24, 2015

1voto

SynSor comentado Nov 25, 2015

Entiendo, pueden proceder a eliminar los comentarios!

Un saludo!

comentado por SynSor (490 puntos) Nov 25, 2015

Pregunta

Cambiar background por "sesiones"

carlossevi comentado Nov 17, 2015

SynSor comentado Nov 17, 2015

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

SynSor comentado Nov 24, 2015

SynSor comentado Nov 24, 2015

carlossevi comentado Nov 24, 2015

Peter comentado Nov 24, 2015

SynSor comentado Nov 25, 2015

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Santiago2610 comentó Mar 23

Santiago2610 preguntó Mar 19

gonzalss preguntó Feb 26

ParkJo preguntó Ene 30

elporfirio respondió Ene 10

ovedg preguntó Dic 31, 2023

Ehdez preguntó Nov 7, 2023

pedrourday preguntó Sep 19, 2023

pedrourday preguntó Ago 21, 2023

Fabio respondió Jul 11, 2023

Ultimas Preguntas

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

danielaGM preguntó

rach preguntó

preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta