jcduranm
Gamma
Verificación en dos pasos activada
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
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.
Inserir CODE, HTML ou 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".
