HTML5 時計 < /h1>

以上がHTML5は時計効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

[はじめに] コードは次のとおりです。 コードをコピーします。 以下は完全なコードです。効果を確認するには、HTML ファイルに保存してください。 HTML5 時計

コードは次のとおりです コードをコピーします 以下は完全なコードです。HTML ファイルに保存して効果を確認してください。

HTML5 時計 - Keleyi ;/a>a href="http://www.keleyi.com/a/bjac/4f6d3873d0571805.htm" target="_blank">原文 HTML5 時計 Ke Leyi は、たとえば HTML5 をサポートするブラウザを使用することを通知します。 Chrome、IE9、IE10、Firefoxなど

function Circle() { }; Circle.prototype = new canvObject(); Circle.prototype.draw = function (ctx) { ctx.beginPath(); ctx. arc(0 , 0, this.radius, 0, 2 * Math.PI, true); ctx.closePath(); };

var Circle = new Circle(); circle.ctx = ctx; circle .x = 100; circle.y = 100; circle.radius = 90; circle.fill = true; circle.borderWidth = 6; circle.fillColor = '#ffffff';

varhour = new Line (); hour.ctx = ctx; hour.x = 100; hour.y = 100; hour.borderColor = "#000000"; hour.borderWidth = 10; hour.rotation = 0; hour .start = [0, 20]; hour.end = [0, -50];

var minutes = new Line(); minut.ctx = ctx; minut.x = 100; minutes.y = 100; 分.borderColor = "#333333"; 分.borderWidth = 7; 分.回転 = 0; 分.開始 = [0, 20]; 分.終了 = [0, -70];

var 秒 = new Line(); 秒.ctx = ctx; 秒.x = 100; 秒.y = 100; 秒.borderColor = "#ff0000"; 秒.borderWidth = 4; 秒。回転 = 0 ; 秒.start = [0, 20]; 秒.end = [0, -80];

var center = new Circle(); center.ctx = ctx; center.x = 100 ; center .y = 100; center.radius = 5; center.fill = true; center.borderColor = 'orange';

for (var i = 0, ls = [], キャッシュ; i cache = ls[i] = new Line(); cache.ctx = ctx; cache.x = 100; cache.y = 100; cache.borderColor = "オレンジ"; キャッシュ.borderWidth = 2; cache.rotation = i * 30; cache.start = [0, -70]; cache.end = [0, -80]; }

timerId = setInterval(function () { // キャンバスをクリア ctx.clearRect(0, 0, 200, 200); // 背景色を塗りつぶす ctx.fillStyle = 'orange'; ctx.fillRect( 0, 0, 200, 200); // ダイヤル circle.update(); // スケール for (var i = 0; キャッシュ = ls[i++]; ) キャッシュ.update(); // 時間hand 時 .rotation = (new Date()).getHours() * 30; hour.update(); // 分針 minutes.rotation = (new Date()).getMinutes() * 6; minutes.update( ); // 秒針 秒.rotation = (new Date()).getSeconds() * 6; 秒.update(); // 中心円 center.update(); } , (1000 / FrameRate ) | 0); } else { alert('Ke Leyi ヒント: お使いのブラウザは HTML5 をサポートしていないため、プレビューできません。'); }