jcduranm
- Seguidores
- 5
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 17 Sep 2014
- Mensajes
- 267
Alguna vez te has preguntado cómo mostrar la hora en un blog?
Mostrar un reloj en un blog es un paso que se puede utilizar para embellecer el blog, y para usarlo, hay muchos sitios que ofrecen widgets de reloj que puedes usar de forma gratuita.
Sin embargo, a veces los widgets de terceros son difíciles de personalizar según el diseño que deseamos. Por ello, esta vez crearemos un reloj digital utilizando el código fuente abierto Vue.js. ¿Cómo lo hacemos?
Antes de pasar al tutorial, puedes ver una demostración del reloj digital para blogs a continuación.
Mostrar un reloj en un blog es un paso que se puede utilizar para embellecer el blog, y para usarlo, hay muchos sitios que ofrecen widgets de reloj que puedes usar de forma gratuita.
Sin embargo, a veces los widgets de terceros son difíciles de personalizar según el diseño que deseamos. Por ello, esta vez crearemos un reloj digital utilizando el código fuente abierto Vue.js. ¿Cómo lo hacemos?
Antes de pasar al tutorial, puedes ver una demostración del reloj digital para blogs a continuación.
- Abre el Panel de Blogger.
- Selecciona el Menú de Diseño.
- Haz clic en "AÑADIR UN GADGET".
- Elige "HTML/Javascript".
- Copia el código a continuación y pégalo en la sección de contenido.
Insertar CODE, HTML o PHP:
<div id="envoltoriodigital">
<div id="reloj">
<div class="fecha"><b>{{ fecha }}</b></div>
<div class="hora">{{ hora }}</div>
</div>
</div>
<style>
#reloj {background:#fefefe29;height:auto;width:auto;color:#000;text-align:center;margin:0;padding:25px;border-radius:22px;line-height:1.6;border:1px solid rgba(155,155,155,0.15)}
#reloj .hora {letter-spacing:0.05em;font-size:55px;padding:0px;background:rgba(255,255,255,.1);border-radius:10px;border:1px solid rgba(0,0,0,0.05);z-index:1;position:relative;}
#reloj .fecha {letter-spacing:0.1em;font-size:20px;padding:10px;}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script type='text/javascript'>
var reloj=new Vue({el:"#reloj",data:{hora:"",fecha:""}}),semana=["DOMINGO","LUNES","MARTES","MIÉRCOLES","JUEVES","VIERNES","SÁBADO"],timerID=setInterval(actualizarHora,1e3);function actualizarHora(){var e=new Date;reloj.hora=formato12Horas(e)+":"+zeroPadding(e.getMinutes(),2)+" "+obtenerAmPm(e),reloj.fecha=semana[e.getDay()]+", "+zeroPadding(e.getDate(),2)+"-"+zeroPadding(e.getMonth()+1,2)+"-"+zeroPadding(e.getFullYear(),4)}function zeroPadding(e,t){for(var a="",d=0;d<t;d++)a+="0";return(a+e).slice(-t)}function formato12Horas(e){var hora=e.getHours();hora=hora%12;hora=hora?hora:12;return hora;}function obtenerAmPm(e){return e.getHours()>=12?"PM":"AM";}actualizarHora();
</script>- Haz clic en "GUARDAR".
