Ejercicio timeout

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

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos