Canvas analog clock widget

Step 1. Go to Blogger Dashboard > Layout. Choose position where you want to add widget, select Add a Gadget and add HTML/ Javascript.

Vào Blogger > Mẫu. Chọn vị trí cần thêm widget, chọn Thêm Gadget > Thêm HTML/ Javascript.

Step 2. Copy code below paste into box then click Save.

Copy đoạn mã bên dưới bỏ vào khung và nhấn Lưu lại.

<canvas id="canvas" width="200" height="200"></canvas> <script> window.onload = function () { setInterval(showClock, 1000); function showClock() { // DEFINE CANVAS AND ITS CONTEXT. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var date = new Date; var angle; var secHandLength = 60; // CLEAR EVERYTHING ON THE CANVAS. RE-DRAW NEW ELEMENTS EVERY SECOND. ctx.clearRect(0, 0, canvas.width, canvas.height); OUTER_DIAL1(); OUTER_DIAL2(); CENTER_DIAL(); MARK_THE_HOURS(); MARK_THE_SECONDS(); SHOW_SECONDS(); SHOW_MINUTES(); SHOW_HOURS(); function OUTER_DIAL1() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 10, 0, Math.PI * 2); ctx.strokeStyle = '#92949C'; ctx.stroke(); } function OUTER_DIAL2() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 7, 0, Math.PI * 2); ctx.strokeStyle = '#929BAC'; ctx.stroke(); } function CENTER_DIAL() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2); ctx.lineWidth = 3; ctx.fillStyle = '#353535'; ctx.strokeStyle = '#0C3D4A'; ctx.stroke(); } function MARK_THE_HOURS() { for (var i = 0; i < 12; i++) { angle = (i - 3) * (Math.PI * 2) / 12; // THE ANGLE TO MARK. ctx.lineWidth = 1; // HAND WIDTH. ctx.beginPath(); var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength); var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength); var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7)); var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7)); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#466B76'; ctx.stroke(); } } function MARK_THE_SECONDS() { for (var i = 0; i < 60; i++) { angle = (i - 3) * (Math.PI * 2) / 60; // THE ANGLE TO MARK. ctx.lineWidth = 1; // HAND WIDTH. ctx.beginPath(); var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength); var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength); var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30)); var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30)); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#C4D1D5'; ctx.stroke(); } } function SHOW_SECONDS() { var sec = date.getSeconds(); angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4); ctx.lineWidth = 0.5; // HAND WIDTH. ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK. ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength), // DRAW THE LENGTH. canvas.height / 2 + Math.sin(angle) * secHandLength); // DRAW THE TAIL OF THE SECONDS HAND. ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK. ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20), // DRAW THE LENGTH. canvas.height / 2 - Math.sin(angle) * 20); ctx.strokeStyle = '#586A73'; // COLOR OF THE HAND. ctx.stroke(); } function SHOW_MINUTES() { var min = date.getMinutes(); angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4); ctx.lineWidth = 1.5; // HAND WIDTH. ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK. ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.1), // DRAW THE LENGTH. canvas.height / 2 + Math.sin(angle) * secHandLength / 1.1); ctx.strokeStyle = '#999'; // COLOR OF THE HAND. ctx.stroke(); } function SHOW_HOURS() { var hour = date.getHours(); var min = date.getMinutes(); angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4); ctx.lineWidth = 1.5; // HAND WIDTH. ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK. ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.5), // DRAW THE LENGTH. canvas.height / 2 + Math.sin(angle) * secHandLength / 1.5); ctx.strokeStyle = '#000'; // COLOR OF THE HAND. ctx.stroke(); } } } </script>

Select code