Tiện ích đồng hồ kim treo tường cho blogspot kiểu 2

 

Tiện ích đồng hồ kim treo tường cho blogspot kiểu 2

 

1/ Vào Bố cục blog, thêm tiện ích HTML/JavaScript, nhập "Đồng Hồ" vào khung Tiêu đề (hoặc nhập Tiêu đề khác tùy ý), coppy code dưới đây dán vào khung Nội dung của tiện ích.

 

<!--- Đồng Hồ --->

 

<center><canvas id="canvas" width="200" height="200"

style="background-color:#333">

</canvas></center>

 

<script>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

setInterval(drawClock, 1000);

 

function drawClock() {

  drawFace(ctx, radius);

  drawNumbers(ctx, radius);

  drawTime(ctx, radius);

}

 

function drawFace(ctx, radius) {

  var grad;

  ctx.beginPath();

  ctx.arc(0, 0, radius, 0, 2*Math.PI);

  ctx.fillStyle = 'white';

  ctx.fill();

  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

  grad.addColorStop(0, '#333');

  grad.addColorStop(0.5, 'white');

  grad.addColorStop(1, '#333');

  ctx.strokeStyle = grad;

  ctx.lineWidth = radius*0.1;

  ctx.stroke();

  ctx.beginPath();

  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

  ctx.fillStyle = '#333';

  ctx.fill();

}

 

function drawNumbers(ctx, radius) {

  var ang;

  var num;

  ctx.font = radius*0.15 + "px arial";

  ctx.textBaseline="middle";

  ctx.textAlign="center";

  for(num = 1; num < 13; num++){

    ang = num * Math.PI / 6;

    ctx.rotate(ang);

    ctx.translate(0, -radius*0.85);

    ctx.rotate(-ang);

    ctx.fillText(num.toString(), 0, 0);

    ctx.rotate(ang);

    ctx.translate(0, radius*0.85);

    ctx.rotate(-ang);

  }

}

 

function drawTime(ctx, radius){

    var now = new Date();

    var hour = now.getHours();

    var minute = now.getMinutes();

    var second = now.getSeconds();

    //hour

    hour=hour%12;

    hour=(hour*Math.PI/6)+

    (minute*Math.PI/(6*60))+

    (second*Math.PI/(360*60));

    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute

    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second

    second=(second*Math.PI/30);

    drawHand(ctx, second, radius*0.9, radius*0.02);

}

 

function drawHand(ctx, pos, length, width) {

    ctx.beginPath();

    ctx.lineWidth = width;

    ctx.lineCap = "round";

    ctx.moveTo(0,0);

    ctx.rotate(pos);

    ctx.lineTo(0, -length);

    ctx.stroke();

    ctx.rotate(-pos);

}

</script>

 

2/ Nhấp Lưu tiện ích, kéo và thả tiện ích vào vị trí tùy ý. Nhấp lưu Bố cục và xem blog để xem kết quả.

 

@ Tham khảo thêm các tùy biến tại đây:

https://tapchilaptrinh.vn/2017/07/29/html5-canvas-thiet-ke-lap-dat-dong-ho/