Hướng dẫn thêm tiện ích đồng hồ kim treo tường cho Blogspot

 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ả. 

Đăng nhận xét

Mới hơn Cũ hơn