Muestra un mensaje o una imagen aleatoria cada vez que recargues la página

libowa

Nuevo
Esta aplicación mostrará un mensaje o una imagen aleatoria cada vez que recargues la página o hagas clic en un botón.

Código completo para insertar en tu blog:
Code:
<!-- Inserta esto en la sección de HTML de tu entrada o en el gadget de HTML/Javascript -->
<div id="alazar-container" style="text-align: center; margin-top: 20px;">
  <h2>¡Haz clic para un mensaje o imagen aleatoria!</h2>
  <button onclick="mostrarAlAzar()">¡Mostrar al azar!</button>
  <div id="resultado" style="margin-top: 20px; font-size: 1.2em;"></div>
</div>

<script>
  // Array de mensajes o URLs de imágenes
  const elementos = [
    { tipo: 'texto', contenido: '¡Hoy es un gran día para aprender algo nuevo!' },
    { tipo: 'texto', contenido: '¿Sabías que los gatos duermen aproximadamente 16 horas al día?' },
    { tipo: 'texto', contenido: '¡Sigue sonriendo y disfruta del día!' },
    { tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
    { tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
    { tipo: 'imagen', contenido: 'https://images.unsplash.com/photo-1549924231-f129b911e442?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
  ];

  function mostrarAlAzar() {
    // Selecciona un elemento aleatorio
    const randomIndex = Math.floor(Math.random() * elementos.length);
    const elemento = elementos[randomIndex];

    // Obtiene el contenedor donde se mostrará el resultado
    const resultadoDiv = document.getElementById('resultado');

    // Limpia contenido previo
    resultadoDiv.innerHTML = '';

    if (elemento.tipo === 'texto') {
      // Muestra un texto
      resultadoDiv.innerText = elemento.contenido;
    } else if (elemento.tipo === 'imagen') {
      // Muestra una imagen
      const img = document.createElement('img');
      img.src = elemento.contenido;
      img.alt = 'Imagen aleatoria';
      img.style.maxWidth = '100%';
      resultadoDiv.appendChild(img);
    }
  }

  // Opcional: mostrar un elemento aleatorio al cargar la página
  window.onload = mostrarAlAzar;
</script>

¿Cómo usarlo?
  1. En tu panel de Blogger, ve a la sección de Diseño o crea una nueva entrada o página.
  2. En el editor, cambia a la vista de HTML.
  3. Copia y pega el código anterior donde quieras que aparezca la aplicación.
  4. Guarda los cambios y visualiza tu blog.
Cada vez que alguien haga clic en el botón o recargue la página, se mostrará un mensaje o una imagen aleatoria.

¡Puedes personalizar la lista de elementos agregando tus propios mensajes o imágenes favoritas!
 

Nuevos temas

Top