Alert con diseño

Imagen
Hey hoy les vengo a compartir este snackAlert ó alert con diseño que e desarollado con HTML, CSS, y JS y la libreria de diseño de w3.css JS function snackAlert(msj,succes1info2warning3error4default5 = 1,time = 3000){ var x = document.getElementById("snackbar"); // Add the "show" class to DIV x.innerHTML = msj; x.className = "show snackbar"+succes1info2warning3error4default5; // After 3 seconds, remove the show class from DIV setTimeout(function(){ x.className = x.className.replace("show", ""); }, time); } HTML el html lo agregan en caulquier parte de su codigo <div class="snackbar"> </div> <button onclick="snackAlert('Hola',1)">Snack Alert</button> Tenemos varios tipos de alert 1 = success 2 = info 3 = warning 4 = error 5 = default See the Pen SnackAlert by Robert Niño ( @robert-nino ) on CodePen .
Publicar un comentario

Hora Militar a Meridiano, Hora de 24H a 12H JavaScript

Hola amigos les vengo a compartir un pequeño código que e desarrollador por una pequeña necesidad que tuve en algún momento.

Cual es la problema a resolver, es en un campo <input type="date"> en lo que el usuario y que en el momento en que el usuario escriba o seleccione una hora militar lo cambie automáticamente a hora meridiana
JS
   function convertTime24to12(time24h) {
                var timex = time24h.split(':');

                if(timex[0] !== undefined && timex [1] !== undefined)
                 {
                     var hor = parseInt(timex[0]) > 12 ? (parseInt(timex[0])-12) : timex[0] ;
                     var minu = timex[1];
                     var merid = parseInt(timex[0]) < 12 ? 'AM' : 'PM';

                     var res = hor+':'+minu+' '+merid;

                     document.getElementById('timeMeridian').innerHTML=res.toString();
                 }
            }
Html
 <label for="end-time">Hora <i id="timeMeridian"></i> </label>
            <input type="time" name="hora" placeholder="Hora" id="end-time" class="form-control" onkeyup="convertTime24to12(this.value)">













como funciona todo esto en el campo <input> tenemos un donde onkeyup llamamos a la funciona de javascript convertTime24to12 y se procesa los datos en la función realiza el proceso de conversión y lo imprime en el <i id="timeMeridian"> en el <label>.



Y listo eso es todo espero que les sirva.

See the Pen Military Time to Meridian, Time from 24H to 12H JavaScript by Robert Niño (@robert-nino) on CodePen.

Comentarios

Publicar un comentario

Entradas populares de este blog

¿Laravel Cómo evitar el error de TokenMismatchException?

Hay veces que cuando estas desarrollando en laravel obtienen un error relacionado a TokenMismatchException , esto es porque el token CSRF ha expirado.  y es un inconveniente nada deseado que vean nuestros usuarios. Básicamente , si no haces nada en la página durante unas horas y luego haces clic en “cerrar sesión”, puedes ver el error que arroja. Para solventar esto, hay que agregar una excepciones a las URL que no deseamos tener protección CSRF. El array se encuentra en app/Http/Middleware/VerifyCsrfToken.php Vas a ver esto: class VerifyCsrfToken extends Middleware { /** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ // ]; } Hay que cambiarlo por esto: class VerifyCsrfToken extends Middleware { /** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ '/logout' // la cual es la ruta de cer...
Leer más

Alert con diseño

Imagen
Hey hoy les vengo a compartir este snackAlert ó alert con diseño que e desarollado con HTML, CSS, y JS y la libreria de diseño de w3.css JS function snackAlert(msj,succes1info2warning3error4default5 = 1,time = 3000){ var x = document.getElementById("snackbar"); // Add the "show" class to DIV x.innerHTML = msj; x.className = "show snackbar"+succes1info2warning3error4default5; // After 3 seconds, remove the show class from DIV setTimeout(function(){ x.className = x.className.replace("show", ""); }, time); } HTML el html lo agregan en caulquier parte de su codigo <div class="snackbar"> </div> <button onclick="snackAlert('Hola',1)">Snack Alert</button> Tenemos varios tipos de alert 1 = success 2 = info 3 = warning 4 = error 5 = default See the Pen SnackAlert by Robert Niño ( @robert-nino ) on CodePen .
Leer más