パークブログをブログに時計を追加する方法

1.コード：RoundClock.js（ファイル名）

VAR DOM =のdocument.getElementById（ '時計' ）;
VAR CTX = dom.getContext（ '2D' ）。
VAR幅= ctx.canvas.width。
VaRの高さ= ctx.canvas.height。
VAR R =幅/ 2 。
// 定义钟盘
機能drawBackground（）{ 
    ctx.save（）。
    ctx.translate（R、R）。
    ctx.beginPath（）; 
    ctx.lineWidth = 10 。
    ctx.font = '18pxのArial' ; 
    ctx.textAlign = '中央' 
    ctx.textBaseline = '中央' 
    ctx.arc（ 0、0、R-5、0、2 *にMath.PI、偽の）; 
    ctx.stroke（）; 
    VaRの hourNumbers = [3、4、5、6、7、8、9、10、11、12、1、2 ]。
    // 遍历获取坐标 
    hourNumbers.forEach（関数（数、I）{
         VARの RAD = 2 *にMath.PI / 12 * I;
         VAR X = Math.cos（RAD）*（R - 30 ）;
         VARの Y =数学。 SIN（RAD）*（R - 30 ）; 
        ctx.fillText（数、X、Y）; 
    }）

    // 定义刻度
    ため（varが I = 0、I <60; I ++ ）{
         VARの RAD = 2 *にMath.PI / 60 * 私は、
        VAR X = Math.cos（RAD）*（R - 18）;
        VaRの Y = Math.sin（RAD）*（R - 18 ）; 
        ctx.beginPath（）; 
        もし（I％5 == 0 ）{ 
            ctx.arc（X、Y、 2、0、2 *にMath.PI、偽）。
            ctx.fillStyle = '＃000' 。
        } 他{ 
            ctx.arc（X、Y、 2、0、2 *にMath.PI、偽）。
            ctx.fillStyle = '#CCC' ; 
        } 
        ctx.fill（）。
    } 

} 

// 定义时钟
機能drawHour（時間、分）{ 
    ctx.save（）。
    ctx.beginPath（）; 
    VARRAD = 2 *にMath.PI / 12 * 時間。
    VaRの mradで= 2 *にMath.PI / 60分の12 * 分。
    ctx.rotate（RAD + ミリラジアン）。
    ctx.lineWidth = 6 。
    ctx.lineCap = 'ラウンド' ; 
    ctx.moveTo（ 0、10 ）; 
    ctx.lineTo（ 0、-r / 2 ）。
    ctx.stroke（）; 
    ctx.restore（）; 
} 
// 定义分钟
機能drawMinute（分、秒）{ 
    ctx.save（）。
    ctx.beginPath（）; 
    VaRのラジアン= 2 *にMath.PI / 60 * 分。
    VaRの SRAD = 2 *にMath.PI / 60/60 *秒。 
    ctx.rotate（RAD + SRAD）。
    ctx.lineWidth = 3 。
    ctx.lineCap = 'ラウンド' ; 
    ctx.moveTo（ 0、10 ）; 
    ctx.lineTo（ 0、-r + 18 ）。
    ctx.stroke（）; 
    ctx.restore（）; 
} 
// 定义秒钟
関数drawSecond（秒）{ 
    ctx.save（）。
    ctx.beginPath（）; 
    VaRの RAD = 2 *にMath.PI / 60 * 秒。
    ctx.rotate（RAD）。
    ctx.lineWidth = 3 。
    ctx.lineCap = 'ラウンド' ; 
    ctx.moveTo（ -2、20 ）。
    ctx.lineTo（ 2、20 ）。 
    ctx.lineTo（ 1、18、-R＆LT +である。）; 
    ctx.lineTo（ -1、+ 18は、-R＆LTである）; 
    ctx.fillStyle = 'c14543位' ; 
    ctx.fill（）; 
    ctx.restore（）; 
} 
// ドットパターン時計ダイヤルの定義
関数drawDot（）{ 
    ctx.beginPath（）; 
    ctx.fillStyle = '#FFF' ; 
    ctx.arc（ 0,0 ,. 3、0、2 *にMath.PI、偽に）; 
    CTX .fill（）; 
} 

// 時間の関数
関数描画（）{ 
    ctx.clearRect（ 0、0 、幅、高さ）;
     VAR今= 新しい新A日（）。
     VAR時間= now.getHours（）;
    VaRの分= now.getMinutesを（）;
    VaRの第二= now.getSeconds（）。
    drawBackground（）; 
    drawHour（時、分）。
    drawMinute（分、秒）。
    drawSecond（秒）。
    drawDot（）; 
    ctx.restore（）; 
} 
のsetInterval（描画 1000）。

コードの表示

//とJSファイルのコメントには、その背後にあるコンテンツは＃として、パイソンを行っていないこと2.注意。

3.コピーして上記のコードは、上記にあなたのブログパークのファイルへのアップロード、ファイル名と言いました。

ファイル管理----- ----- -----アップロードするファイルを選択します

4.次のコードをコピーします。

<DIV CLASS = "clockdiv"> <キャンバスのid = "時計"幅= "200pxの"高さ= "200pxの"> お使いのブラウザはの<div> </キャンバス>キャンバスとの互換性がありません <！ - ラウンド時計- > 
ます。<script type = "text / javascriptの " SRC = "http://files.cnblogs.com/files/ysysbky/RoundClock.js"> </ SCRIPT> <！ - 円形時計- >

コードの表示

5.管理-----設定

サイドバーの発表（サポートHTMLコード）（サポートJSコード）この位置をブログ。

あなたがjsのコードを、それを適用する必要性を適用しない場合、彼らは渡すことができます前に待機しなければなりません。

あなたは既にコードが存在している場合は、私が上に、空白行を覚えていることに注意してください。

6.、それを保存するプロのテストが成功しました。

パークブログをブログに時計を追加する方法

おすすめ