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)
}
}