Home » CSS » Poner gadget reloj estilo minimalista a mi blog de blogger hecho en (CSS, JS,HTML5)

Poner gadget reloj estilo minimalista a mi blog de blogger hecho en (CSS, JS,HTML5)


 ,  Comentarios

El día de hoy enseñaré de forma sencilla cómo poner un reloj de estilo minimalista en nuestro blog de Blogger claro está que tambien se puede colocar en otras webs o CMS.

Este reloj se puede agregar al sitio como un Gadget o directamente en la plantilla se visualiza de la siguiente forma (estilo minimalista): 
PROCESO CANVAS

Como ven es un reloj sencillo pero bonito para agregar este Gadget vamos a Diseño > Añadir un Gadget > HTML/Javascript y a continuación pegarán cualquiera de los siguientes relojes de su gusto:

Estilo #1


Código a pegar:
<center><canvas height="150" width="150" id="canvas">PROCESO CANVAS</canvas></center>
<style>
*{padding:0;margin:0}
</style>
<script>
 function init(){
  clock();
  setInterval(clock,1000);
}
function clock(){
  var now = new Date();
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

  // MARCA HORAS
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();

  // MARCA MINUTOS
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
  
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

  ctx.fillStyle = "black";

  // ESCRIBE HORAS
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // ESCRIBE MINUTOS
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
  
  // ESCRIBE SEGUNDOS
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();

  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();

  ctx.restore();
}
init();
</script>

Estilo #2

Código a pegar: 
    <center><canvas height="150" width="150" id="canvas">PROCESO CANVAS</canvas></center>
    <style>
    *{padding:0;margin:0}
    </style>
    <script>
     function init(){
      clock();
      setInterval(clock,1000);
    }
    function clock(){
      var now = new Date();
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.save();
      ctx.clearRect(0,0,150,150);
      ctx.translate(75,75);
      ctx.scale(0.4,0.4);
      ctx.rotate(-Math.PI/2);
      ctx.strokeStyle = "green";
      ctx.fillStyle = "white";
      ctx.lineWidth = 8;
      ctx.lineCap = "round";
      // MARCA HORAS
      ctx.save();
      for (var i=0;i<12;i++){
        ctx.beginPath();
        ctx.rotate(Math.PI/6);
        ctx.moveTo(100,0);
        ctx.lineTo(120,0);
        ctx.stroke();
      }
      ctx.restore();
      // MARCA MINUTOS
      ctx.save();
      ctx.lineWidth = 5;
      for (i=0;i<60;i++){
        if (i%5!=0) {
          ctx.beginPath();
          ctx.moveTo(117,0);
          ctx.lineTo(120,0);
          ctx.stroke();
       }
        ctx.rotate(Math.PI/30);
      }
      ctx.restore();
    var sec = now.getSeconds();
      var min = now.getMinutes();
      var hr  = now.getHours();
      hr = hr>=12 ? hr-12 : hr;
      ctx.fillStyle = "black";
      // ESCRIBE HORAS
      ctx.save();
      ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
      ctx.lineWidth = 14;
      ctx.beginPath();
      ctx.moveTo(-20,0);
      ctx.lineTo(80,0);
      ctx.stroke();
      ctx.restore();
      // ESCRIBE MINUTOS
      ctx.save();
      ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
      ctx.lineWidth = 10;
      ctx.beginPath();
      ctx.moveTo(-28,0);
      ctx.lineTo(112,0);
      ctx.stroke();
      ctx.restore();
      // ESCRIBE SEGUNDOS
      ctx.save();
      ctx.rotate(sec * Math.PI/30);
      ctx.strokeStyle = "#FE2E2E";
      ctx.fillStyle = "#FE2E2E";
      ctx.lineWidth = 6;
      ctx.beginPath();
      ctx.moveTo(-30,0);
      ctx.lineTo(83,0);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(0,0,10,0,Math.PI*2,true);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(95,0,10,0,Math.PI*2,true);
      ctx.stroke();
      ctx.fillStyle = "rgba(0,0,0,0)";
      ctx.arc(0,0,3,0,Math.PI*2,true);
      ctx.fill();
      ctx.restore();
      ctx.beginPath();
      ctx.lineWidth = 14;
      ctx.strokeStyle = '#FE2E2E';
      ctx.arc(0,0,142,0,Math.PI*2,true);
      ctx.stroke();
      ctx.restore();
    }
    init();
    </script>

Estilo #3  


Código a pegar:
    <center><canvas height="150" width="150" id="canvas">PROCESO CANVAS</canvas></center>
    <style>
    *{padding:0;margin:0}
   </style>
   <script>
    function init(){
     clock();
     setInterval(clock,1000);
   }
   function clock(){
      var now = new Date();
     var ctx = document.getElementById('canvas').getContext('2d');
     ctx.save();
     ctx.clearRect(0,0,150,150);
     ctx.translate(75,75);
    ctx.scale(0.4,0.4);
     ctx.rotate(-Math.PI/2);
     ctx.strokeStyle = "#F7819F";
     ctx.fillStyle = "white";
     ctx.lineWidth = 8;
     ctx.lineCap = "round";
     // MARCA HORAS
     ctx.save();
     for (var i=0;i<12;i++){
       ctx.beginPath();
       ctx.rotate(Math.PI/6);
       ctx.moveTo(100,0);
       ctx.lineTo(120,0);
        ctx.stroke();
      }
     ctx.restore();
     // MARCA MINUTOS
     ctx.save();
    ctx.lineWidth = 5;
    for (i=0;i<60;i++){
       if (i%5!=0) {
         ctx.beginPath();
         ctx.moveTo(117,0);
         ctx.lineTo(120,0);
         ctx.stroke();
       }
       ctx.rotate(Math.PI/30);
     }
    ctx.restore();
    var sec = now.getSeconds();
     var min = now.getMinutes();
     var hr  = now.getHours();
     hr = hr>=12 ? hr-12 : hr;
     ctx.fillStyle = "black";
     // ESCRIBE HORAS
     ctx.save();
     ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
     ctx.lineWidth = 14;
     ctx.beginPath();
     ctx.moveTo(-20,0);
     ctx.lineTo(80,0);
     ctx.stroke();
     ctx.restore();
     // ESCRIBE MINUTOS
     ctx.save();
     ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
     ctx.lineWidth = 10;
     ctx.beginPath();
     ctx.moveTo(-28,0);
    ctx.lineTo(112,0);
   ctx.stroke();
    ctx.restore();
     // ESCRIBE SEGUNDOS
     ctx.save();
     ctx.rotate(sec * Math.PI/30);
     ctx.strokeStyle = "#FA58F4";
     ctx.fillStyle = "#FA58F4";
     ctx.lineWidth = 6;
     ctx.beginPath();
     ctx.moveTo(-30,0);
     ctx.lineTo(83,0);
     ctx.stroke();
     ctx.beginPath();
     ctx.arc(0,0,10,0,Math.PI*2,true);
     ctx.fill();
     ctx.beginPath();
     ctx.arc(95,0,10,0,Math.PI*2,true);
     ctx.stroke();
     ctx.fillStyle = "rgba(0,0,0,0)";
     ctx.arc(0,0,3,0,Math.PI*2,true);
     ctx.fill();
     ctx.restore();
     ctx.beginPath();
     ctx.lineWidth = 14;
     ctx.strokeStyle = '#FE2E9A';
     ctx.arc(0,0,142,0,Math.PI*2,true);
     ctx.stroke();
     ctx.restore();
   }
   init();
    </script>  

Muy bien son estos tres estilos que por ahora pongo, espero les guste estos sencillos relojes y muy agradables.

Hasta la próxima BloggeRs,

¿Quieres más estilos? Comenta! 

ESCRITO POR Andrés Felipe Lozano

Colombiano, Ingeniero Electrónico, 26 años, Experto de Producto en los Foros Oficiales de Google, bloggin, electrónica aficionado por las motocicletas. También tengo un blog de electrónica "skulltrap.co" ¡Disfruta todo el contenido!

0 comentarios:

Publicar un comentario

ESTAMOS EN: