Una página web con un h1 que cada 5 segundos cambie de color
Opción 1: Aleatorio
OPción 2: de negro a rojo y viceversa
Una página web con un contador de 100 a 0 cada segundo.
En los múltiplos de 5 que esté en negrita.
<div id="contenedor" class="container "> <h1 id="cambiante">Texto que cambia de color</h1> <script src="js/test.js"></script> </div>
setInterval(cambiar, 1000) let negro = true function cambiar () { // opcion 1 // document.getElementById('cambiante').style.color = getRandomColor() // opcion 2 sin semáforo /* if (document.getElementById('cambiante').style.color == '') { document.getElementById('cambiante').style.color = 'red' } else { document.getElementById('cambiante').style.color = '' } */ // opcion 2 con semáforo if (negro) { document.getElementById('cambiante').style.color = 'red' } else { document.getElementById('cambiante').style.color = '' } negro = !negro } function colorAleatorio () { const colores = ['red', 'blue', 'green', 'yellow', 'orange', 'olive', 'violet'] const numero = Math.floor(Math.random() * colores.length) return colores[numero] } function colorAleatorioTotal () { const rojo = Math.floor(Math.random() * 256) const verde = Math.floor(Math.random() * 256) const azul = Math.floor(Math.random() * 256) return 'rgb(' + rojo + ',' + verde + ',' + azul + ')' } function getRandomColor () { const letters = '0123456789ABCDEF' let color = '#' for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color }
const temporizador = setInterval(contar, 1000) let contador = 10 function contar () { document.getElementById('cambiante').innerHTML = contador if (contador % 5 == 0) { document.getElementById('cambiante').style.color = 'red' document.getElementById('cambiante').style.fontWeight = 'bold' } else { document.getElementById('cambiante').style.color = 'black' document.getElementById('cambiante').style.fontWeight = 'normal' } contador-- if (contador < 0) { clearInterval(temporizador) } }