Tiện ích đồng hồ kim treo tường đẹp cho blogspot
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="200px" height="200px" style="border: 1px solid"></canvas></center>
<script>
const ONE_RADIAN = Math.PI/180;
const CLOCK_RADIUS = 100;
const SECOND_HAND_SIZE = CLOCK_RADIUS * 0.9;
const MINUTE_HAND_SIZE = CLOCK_RADIUS * 0.7;
const HOUR_HAND_SIZE = CLOCK_RADIUS * 0.5;
var cx;
var cy;
var canvas;
var context;
var _animationFrame;
var _startTime;
function loop(time) {
var diffTime = Math.abs(time - _startTime);
if(diffTime >= 1000)
{
update();
_startTime = time;
}
_animationFrame(loop);
}
// draw a line from {x1, y1} to {x2,y2}
function drawLine(x1,y1,x2,y2,lineWidth,color){
context.save();
context.lineWidth = lineWidth;
if(color)
context.strokeStyle = color;
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();
context.restore();
}
// draw a circle with the center at {cx, cy}
function drawCircle(cx,cy,radius){
context.beginPath();
context.arc(cx,cy, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
function update(){
context.clearRect(0, 0, canvas.width, canvas.height);
// draw clock dial
drawCircle(cx,cy,4);
for(var i=0;i<60;i++){
var angle = 6*i*ONE_RADIAN;
var x = cx + Math.cos(angle)*CLOCK_RADIUS;
var y = cy + Math.sin(angle)*CLOCK_RADIUS;
var radius = 1;
if(i%5==0)
{
radius = 3;
var hour = (i/5+3)%12;
if(hour == 0)
hour = 12;
// text width
var tw = context.measureText(hour).width;
// text location
var tx = cx + Math.cos(angle)*SECOND_HAND_SIZE-tw/2;
var ty = cy + Math.sin(angle)*SECOND_HAND_SIZE+6;
context.fillText(hour,tx,ty);
}
drawCircle(x,y,radius);
}
// draw clock hands ////////////////////////////////////
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// second hand
var angle = ONE_RADIAN*seconds*6;
var x = cx + Math.sin(angle)*SECOND_HAND_SIZE;
var y = cx - Math.cos(angle)*SECOND_HAND_SIZE;
drawLine(cx,cy,x,y,1);
// minute hand
angle = ONE_RADIAN*minutes*6;
x = cx + Math.sin(angle)*MINUTE_HAND_SIZE;
y = cx - Math.cos(angle)*MINUTE_HAND_SIZE;
drawLine(cx,cy,x,y,2,"blue");
// hour hand
angle = ONE_RADIAN * (hours+minutes/60)*30;
x = cx + Math.sin(angle)*HOUR_HAND_SIZE;
y = cx - Math.cos(angle)*HOUR_HAND_SIZE;
drawLine(cx,cy,x,y,4,"#900000");
}
window.onload = function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.font = "14px Arial";
cx = canvas.width/2;
cy = canvas.height/2;
_animationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ;
if(_animationFrame)
{
_startTime = Date.now();
_animationFrame(loop);
}
else
alert("Your browser don't support requestAnimationFrame.");
};
</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ả.