How to add a clock to blog Park blog

1. Code: RoundClock.js (filename)

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
//定义钟盘
function drawBackground(){
    ctx.save();
    ctx.translate(r, r);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.font ='18px Arial';
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    //遍历获取坐标
    hourNumbers.forEach(function(number, i){
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30);
        var y = Math.sin(rad) * (r - 30);
        ctx.fillText(number, x ,y);
    })

    //定义刻度
    for(var i=0;i<60;i++){
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18);
        var y = Math.sin(rad) * (r - 18);
        ctx.beginPath();
        if(i % 5 == 0){
            ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
            ctx.fillStyle = '#000';
        }else{
            ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
            ctx.fillStyle = '#ccc';
        }
        ctx.fill();
    }

}

//定义时钟
function drawHour(hour,minute){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 / 60 * minute;
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 6;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r / 2);
    ctx.stroke();
    ctx.restore();
}
//定义分钟
function drawMinute(minute,second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    var srad = 2 * Math.PI / 60 /60 * second;
    ctx.rotate(rad + srad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r + 18);
    ctx.stroke();
    ctx.restore();
}
//定义秒钟
function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(-2 ,20);
    ctx.lineTo( 2, 20 is);
    ctx.lineTo ( . 1, 18 is -R & lt + ); 
    ctx.lineTo ( -1, + 18 is -R & lt ); 
    ctx.fillStyle = 'c14543 #' ; 
    ctx.fill (); 
    ctx.restore (); 
} 
// define dot pattern clock dial 
function drawDot () { 
    ctx.beginPath (); 
    ctx.fillStyle = '#fff' ; 
    ctx.arc ( 0, 0,. 3, 0, 2 * Math.PI, to false ); 
    ctx.fill ( ); 
} 

// function of time 
function Draw () { 
    ctx.clearRect ( 0, 0 , width, height);
     var now = new new a Date ();
     var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute,second);
    drawSecond(second);
    drawDot();
    ctx.restore();
}
setInterval(draw, 1000);

View Code

 

2. Note that in js file comments with //, the content behind it is not performed, the python as a #.

 

3. Copy the code above it, into the above said that the file name, upload to your blog Park file.

File management ----- ----- ----- select a file to upload

 

4. Copy the following code:

<div class = "clockdiv"> <canvas id = "clock" width = "200px" height = "200px"> Your browser is not compatible with canvas </ canvas> <div> <-! Round Clock -> 
<script type = "text / javascript " src = "http://files.cnblogs.com/files/ysysbky/RoundClock.js"> </ script> <-! circular clock ->

View Code

 

5. Management ----- settings

Blog sidebar announcement (supports HTML code) (Support JS code) this position.

If you do not apply js code, need to apply for it, have to wait before they can pass.

Note that if you already have a code exists, I remember a blank line, on top.

 

6. save it, has been pro-test succeeded.