https://www.w3schools.com/js/js_date_methods_set.asp
Ejercicio local Storage
Tenemos una web con un input para poner una cantidad y un botón que pone sumar.
Cada vez que le demos al botón nos suma la cantidad en una variable almacenada en el localStorage y nos la muestra en un h1.
Cuando carguemos la página, si ya hay valores en el localStorage mostramos ese valor en el h1
<div id="contenedor" class="container "> Cantidad: <input type="number" id="cantidad"> <button class="btn btn-success" id="sumar">Sumar</button> <button class="btn btn-success" id="borrar">Borrar</button> <h1 id="resultado"></h1> </div> <script src="js/test.js"></script>
document.getElementById('sumar').addEventListener('click', sumar) document.getElementById('borrar').addEventListener('click', borrar) document.addEventListener('DOMContentLoaded', function (event) { if (localStorage.getItem('cantidad') != null) { document.getElementById('resultado').innerHTML = localStorage.getItem('cantidad') } }) function sumar () { // Recupero el valor del input let cantidad = parseFloat(document.getElementById('cantidad').value) if (isNaN(cantidad)) { cantidad = 0 } // Recupero el valor de localStorage let cantidadAlmacenada = parseFloat(localStorage.getItem('cantidad')) // Si en el localStorage no hay número, bien porque no existe la variable // Bien porque existe pero no es un número // La pongo a 0 if (isNaN(cantidadAlmacenada)) { cantidadAlmacenada = 0 } // Calculo la suma const suma = cantidad + cantidadAlmacenada // La muestro en el H1 porque me lo piden document.getElementById('resultado').innerHTML = suma // ALmaceno el resultado en el localStorage para que quede registrado // En setItem tengo 'nombre de la variable', valor de la variable localStorage.setItem('cantidad', suma) } function borrar () { // Funcionaría localStorage.removeItem('cantidad') // Lo más lógico según mi estructura sería lo siguiente localStorage.setItem('cantidad', 0) }
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) } }
Ejemplo de uso de localStorage
<button id="poner">Pon Storage</button> <button id="obtener">Obtener Storage</button> <button id="eliminar">Eliminar Storage</button> <script src="js/test.js"></script>
document.getElementById('poner').addEventListener('click', poner) document.getElementById('obtener').addEventListener('click', obtener) document.getElementById('eliminar').addEventListener('click', eliminar) localStorage.clear() function poner () { localStorage.setItem('edad', 50) } function obtener () { const edad = localStorage.getItem('edad') alert(edad) } function eliminar () { localStorage.removeItem('edad') }
Funciones para cookies
function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; } function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); } function deleteCookie(name) { setCookie(name, '', -1); }
Ejemplos de uso de cookies
<div id="contenedor" class="container "> <button id="poner">Pon cookie</button> <button id="obtener">Obtener cookie</button> <button id="eliminar">Eliminar cookie</button> <script src="js/test.js"></script> </div>
document.getElementById('poner').addEventListener('click', poner) document.getElementById('obtener').addEventListener('click', obtener) document.getElementById('eliminar').addEventListener('click', eliminar) function poner () { setCookie('edad', 50, 10) } function obtener () { const edad = getCookie('edad') alert(edad) } function eliminar () { setCookie('edad', 50, -10) } function setCookie (cname, cvalue, exdays) { const d = new Date() d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)) const expires = 'expires=' + d.toUTCString() document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/' } function getCookie (cname) { const name = cname + '=' const decodedCookie = decodeURIComponent(document.cookie) const ca = decodedCookie.split(';') for (let i = 0; i < ca.length; i++) { let c = ca[i] while (c.charAt(0) == ' ') { c = c.substring(1) } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length) } } return '' }
Mini ejercicio Timeout
Tenemos una web con un h1.
Queremos que cada 5 segundos en el h1 aparezca un número aleatorio del 1 al 6
<div id="contenedor" class="container "> <h1 id="dado"></h1> <script src="js/test.js"></script> </div>
setInterval(aleatorio, 5000) function aleatorio () { const dado = getTirada() document.getElementById('dado').innerHTML = dado } function getTirada () { return Math.floor(Math.random() * 6 + 1) }
Ejemplo timeout
<div id="contenedor" class="container "> <button id="parar" class="btn btn-primary">Parar</button> <h1 id="contador"></h1> <script src="js/test.js"></script> </div>
document.getElementById('parar').addEventListener('click', parar) let contador = 20 let temporizador = setTimeout(saludo, 1000) function parar () { clearInterval(temporizador) } function saludo () { document.getElementById('contador').innerHTML = contador contador-- if (contador < 0) { alert('RINGRING!!!') } else { temporizador = setTimeout(saludo, 1000) } }
Juego del 1 al 100
Tenemos 100 botones con los números del 1 al 100 y hay que pulsarlos correlativamente:
https://www.microsiervos.com/archivo/juegos-y-diversion/del-1-al-100-juego-numeros.html
¿Seríamos capaz de hacer algo parecido?
Modificaciones:
1.- Que la cantidad de botones la pueda elegir el usuario mediante un input
Cantidad:[___] [Empezar]
2.- Que para crear el array desordenado tengamos una función que lo haga function arrayDesordenado(cantidad)-> [4,2,6,1,3,5]
3.- Que para crear el botón tengamos otra función crearBoton(texto)–> Nos devuelva el botón con el texto que le pasemos
<div id="contenedor" class="container "> <button id="empezar" class="btn btn-primary">Empezar</button> <div id="tablero"> </div> <script src="js/test.js"></script> </div>
document.getElementById('empezar').addEventListener('click', empezar) let numeroAPulsar const maximo = 30 function empezar () { numeroAPulsar = 1 const tablero = document.getElementById('tablero') tablero.innerHTML = '' // Creo un array de números del 1 al 20 // Y luego lo desordeno const numeros = [] for (let i = 0; i < maximo; i++) { numeros.push(i + 1) } for (let i = 0; i < 10; i++) { numeros.sort(function (a, b) { return 0.5 - Math.random() }) } for (let i = 0; i < maximo; i++) { // Crear un botón const boton = document.createElement('button') boton.innerHTML = numeros[i] boton.className = 'btn btn-success m-1' boton.addEventListener('click', pulsado) tablero.appendChild(boton) } } function pulsado () { const numeroPulsado = parseFloat(this.innerHTML) if (numeroAPulsar == numeroPulsado) { this.disabled = 'true' this.className = 'btn m-1' this.style.color = 'red' numeroAPulsar++ if (numeroAPulsar > maximo) { alert('Has ganado ¡BRAVO!') document.getElementById('tablero').innerHTML = '' } } else { alert('Has perdido ¡JAJAJAJA!') document.getElementById('tablero').innerHTML = '' } }
Mejorándolo un poco y comentando:
<div id="contenedor" class="container "> <label for="cantidad">Introduzca la cantidad de botones</label> <input id="cantidad" type="number"> <button id="empezar" class="btn btn-primary">Empezar</button> <div id="tablero"> </div> <script src="js/test.js"></script> </div>
document.getElementById('empezar').addEventListener('click', empezar) let numeroAPulsar let maximo = 30 function empezar () { // El máximo nos lo pone el usuario en el input cantidad maximo = parseFloat(document.getElementById('cantidad').value) // Primero hay que pulsar el 1. Como aquí comenzamos empezamos por el principio numeroAPulsar = 1 // Me guardo el tablero para no tener que estar repitiendo el documeng.getElementById const tablero = document.getElementById('tablero') // Vacío el tablero porque estoy empezando tablero.innerHTML = '' // LLamo a la función arrayDesordenado para obtener un array desordenado // ¿Cuántos elementos? Los que me ha dado el usuario y que los he guardado en maximo const numeros = arrayDesordenado(maximo) // Añado tantos botones como me haya dicho el usuario (maximo) for (let i = 0; i < maximo; i++) { // Crear un botón llamando a la función y le paso el texto que quiero que tenga // En este caso el elemento del array para que los botones salgan desordenados const boton = crearBoton(numeros[i]) // Y lo añado al tablero tablero.appendChild(boton) } } function crearBoton (texto) { // Creo el elemento const boton = document.createElement('button') // Le pongo como texto lo que me pasen como parámetro boton.innerHTML = texto // Le añado una clase para hacer bonito boton.className = 'btn btn-success m-1' // Capturo el evento click para que cuando pulsen el botón comprobemos // SI el usuario va bien o ha perdido boton.addEventListener('click', pulsado) // Devuelvo el botón return boton } function arrayDesordenado (cantidad) { // Creo un array de números del 1 a cantidad const numeros = [] for (let i = 0; i < cantidad; i++) { numeros.push(i + 1) } // Desordeno el array for (let i = 0; i < 10; i++) { numeros.sort(function (a, b) { return 0.5 - Math.random() }) } // Devuelvo el array return numeros } function pulsado () { // Miro cual es el número que me han pulsado (el texto del botón) const numeroPulsado = parseFloat(this.innerHTML) if (numeroAPulsar == numeroPulsado) { // Si el número pulsado es el que se tenía que pulsar // Deshabilito el botón this.disabled = 'true' // Le cambio la clase this.className = 'btn m-1' // Le pongo color rojo this.style.color = 'red' // El número a pulsar es uno más numeroAPulsar++ // SI ya hemos pulsado todos los números el usuario ha ganado if (numeroAPulsar > maximo) { alert('Has ganado ¡BRAVO!') document.getElementById('tablero').innerHTML = '' } } else { // Si el número no es el que se tenía que pulsar el usuario ha perdido alert('Has perdido ¡JAJAJAJA!') document.getElementById('tablero').innerHTML = '' } }
Ejercicio
Vamos a crear una web que nos pida dos números y nos muestre en un h1 la suma entre el primero y el último.
Numero1: [___] NUmero2: [____]
[Calcular]
La suma es…
Hacedlo con el evento click del botón pero podéis probar a hacerlo con el change de los inputs.
<div id="contenedor" class="container "> <div class="form-group"> <label for="num1">Número 1:</label> <input type="text" class="form-control" maxlength="10" id="num1" placeholder="Introduce un número"> <p id="mensaje"></p> <label for="num2">Número 2:</label> <input type="text" class="form-control" id="num2" placeholder="Introduce un número"> </div> <button id="sumar">Sumar</button> <div id="resultados"> </div> <script src="js/test.js"></script> </div>
// Capturo el evento click del botón document.getElementById('sumar').addEventListener('click', sumar) // Capturo el evento change de los inputs document.getElementById('num1').addEventListener('change', sumar) document.getElementById('num2').addEventListener('change', sumar) // Capturo el evento keyup document.getElementById('num1').addEventListener('keyup', comprobar) function sumar () { // Recupero los valores de los números const num1 = parseFloat(document.getElementById('num1').value) const num2 = parseFloat(document.getElementById('num2').value) // Los sumo const suma = num1 + num2 // Si el resultado es un número, o lo que es lo mismo 'no es cierto que no es un número' if (!isNaN(suma)) { // Creo un párrafo const parrafo = document.createElement('p') // Le pongo un texto parrafo.innerHTML = 'El resultado es: ' + suma // Lo añado al div 'resultados' document.getElementById('resultados').appendChild(parrafo) } } function comprobar () { const cadena = document.getElementById('num1').value if (cadena.length == 10) { document.getElementById('mensaje').innerHTML = 'No puedes escribir más' } else { document.getElementById('mensaje').innerHTML = '' } }