¿Cómo ocultar mouse pasado un tiempo JavaScript?

Imagen
Hola hoy les traigo un efecto que nos puede servir en alguna ocasión para algún proyecto y ese es ocultar el cursor del mouse pasado x tiempo Las tecnologías que usaremos son: HTML: para crear la estrucura y los elementos necesarios CSS: utilizaremos la propiedad cursor para cambiar el cursor JavaScript: manejaremos todo lo necesario para realizar este proyecto usaremos ,setTimeout ,manejo de eventos addEventListener entre otros ¿Para qué nos puede servir esto? Pues en primer lugar y para lo que yo lo he usado es para crear mis reproductores personalizados de HTML5, después de un tiempo de inactividad del mouse se oculta el cursor logrando ver solo la pantalla, hay otras funcionalidades que les puedes dar y puedes usarlo para lo que realmente desees no solo ocultar el cursor pero en esta ocasión he decidido usar este ejemplo <div id="contenido"> </div> <style> /* le damos un estilo a nuestro div */ #contenido{

Ejemplos Date con JavaScript

Cómo pudiste notar a penas entraste en esta página se mostró una alerta dándote las bienvenidas según la fecha de tu PC y dirás que tiene eso de grandioso la verdad nada pero lo tendrá.

Lograr este efecto es tan fácil como declarar 3 condicionales y listo veamos.

    
<script>
  var fecha=new Date();
  var hora=fecha.getHours(); //accedemos a la hora que tiene el PC
    if(hora>=0 && hora<12){
      alert("Buenas Dias!!!")
     }
    if(hora>=12&& hora<=18){
      alert("Buenas Tardes!!!")
     }
    if(hora>18&& hora<=23){
      alert("Buenas Noches!!!")
    } 
</script>
    

La verdad el código anterior es muy sencillo pero logro a complicárseme un poco por las siguientes cuestionesAmanece a la misma hora en todos los países? , la madrugada se considera por la mañana y la frase "Son las 3 de la mañana" si en realidad no ha amanecido esas cuestiones y otras hicieron que pensara en la mejor alternativa ,obviar esos detalles.

Establecí mis 3 condiciones.

Buenos días si, la hora es mayor igual que 0 y es menor que 12.

Buenos tardes si, la hora es mayor igual que 0 y es menor igual que 18.

Buenos noches si, la hora es mayor que 18 y es menor que igual que 23.

Algunas personas se estarán preguntando qué es eso de 23 si mi reloj tiene solo hasta 12

Sin ofender a ese tipo de personas les daremos una explicación exhaustiva "hora militar" [0-23] busca en Wikipedia y si de contrario si sabias que es pero te cuesta saber por ejemplo que las 16.00 son las 4.00pm aquí te traigo un tip :).

        
      si la hora militar es mayor que 12
      hora militar-12=hora  común 
    

O sea las 13 seria.

13-12=1

Lo cual explica que las 13 es la 1.

Ya explicado lo anterior vayamos a otro ejemplo que puede parecer interesante y ese es :

Reloj Sencillo JavaScript.


 <div id="reloj"></div>
 <script>
  var reloj=document.getElementById("reloj");
  function cargarReloj() {
    var fecha=new Date();
    var hora=fecha.getHours(); 
    var minutos=fecha.getMinutes();
    var segundos=fecha.getSeconds();
    reloj.innerHTML=hora+":"+minutos+":"+segundos+"";
    }
            setInterval(cargarReloj,1000)
            cargarReloj()
            </script>
    

Vista previa

Lógica.

Primero que todo creo un div donde voy a mostrar la hora, en la línea 3 accedo al elemento a través de su id, creo una función llamada cargarReloj y dentro establezco variables como la fecha hora, minutos y segundos, en la línea 8 muestro esas variables en el div antes creado y ahora es que viene la magia y quizás lo más importante para que funcione el reloj, creo un intervalo que llama a la función cargarReloj cada 1 segundo, es decir que cada 1 segundo se van a actualizar las variables con los fecha actual y se mostrara en pantalla justo lo que necesitamos para simular un reloj.

Ahí tienen un reloj híper fácil único inconveniente la hora militar pero si resuelvo ese problemilla no fuera tan sencillo.

Ya tenemos un reloj y el tiempo ha pasado desde entonces, tanto que ni siquiera nos hemos dado cuenta de la edad que tenemos actualmente, si bien podríamos calcularlo nosotros, como buen programador que somos hemos decidido crear un sistema que nos facilite el trabajo.

Calcular edad segun la fecha de nacimiento


 <script>
    //FECHA DE NACIMIENTO
 var dianac=prompt("Que dia naciste?");
 var mesnac=prompt("En que mes naciste?");
 var anionac=prompt("En que año naciste?");
    //FECHA ACTUAL
 var fecha_actual=new Date();
    var dia_actual=fecha_actual.getDate(); //dia [1-31]
    var mes_actual=fecha_actual.getMonth()+1; //mes [0-11]
    var anio_actual=fecha_actual.getFullYear(); //año formato Ej 2021 
 function calcularEdad(){
  var edad=anio_actual-anionac;
  if(dia_actual>=dianac && mes_actual==mesnac){ //estamos en el mes de nacimiento y ya su dia de nacimiento paso ?
    //cumplio ya este año en este mes 
  }else if(mes_actual>mesnac){  //el mes del nacimiento ya paso?
    //cumplio ya este año 
  }else{
     //todavia no ha cumplido le resto 1
    var edad=edad-1 ;
  }

 }
 calcularEdad()
 </script>
    

Lo primero que debemos hacer antes de todo para entender el programa es:Establecer las condiciones de edad

La edad de una persona se calcula fácil año actual - año de nacimiento pero que pasa si la persona todavía no ha cumplido edad en este año, pues deberíamos ser capaces de decir que si no ha cumplido le restamos 1 a la edad y si ya cumplió lo mantenemos igual veamos un ejemplo y seguiremos explicando

Imaginemos que hoy es 23/06/2021 [23 de junio de 2021] y queremos calcular la edad de una persona que nació el 27/08/2000 [27 de agosto de 2000] el cálculo rápido que haríamos enseguida seria:

edad=año actual - año de nacimiento edad=2021-2000 edad=21

Esa debería ser la edad de la persona,21 años pero te pregunto ya esa persona cumplió sus 21 años o todavía, analicemos esa sección

Bueno mentalmente si hoy es 23/06/2021 [23 de junio de 2021] y el cumple años el 27/08/2000 [27 de agosto de 2000] todavia no ha cumplido sus 21.Le faltan todavia 2 meses con 4 dias para que tenga 21 por lo tanto ahora tiene 20 o sea

    
        SI no ha cumplido 
        la edad = edad-1
        Si ya cumplió 
        lo mantengo todo igual no hago nada
    

Sé que puede resultar complicado al ser algo abstracto por eso me he tomado la tarea de crear una función por si lo necesitas para que copies e implementes


 function calcularEdad(anionac,mesnac,dianac){
    var fecha_actual=new Date();
    var dia_actual=fecha_actual.getDate(); 
    var mes_actual=fecha_actual.getMonth()+1; 
    var anio_actual=fecha_actual.getFullYear(); 
    var edad=anio_actual-anionac;
     if(dia_actual>=dianac && mes_actual==mesnac){ 
    }else if(mes_actual>mesnac){  
    }else{
    var edad=edad-1 ;
     }
return edad
       }


Listo con eso tendrían solucionado todo problema en caso de no entender el código de ninguna manera y podemos calcular la edad

Creo que ha sido suficiente por esta publicación nos vemos en otra ocasión Bye

Comentarios

Entradas más populares de este blog

Variables en JavaScript

¿Cómo ocultar mouse pasado un tiempo JavaScript?