前回、Excelでゴリゴリ描いた文字盤(PNG画像)、
図1:長針
図2:短針
図3:秒針
秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
Excelの図形でも、なんとか時計っぽく見えますね。。
MdN
売り上げランキング: 2158
・Excelの図形を組み合わせて文字盤を作る方法 | たかいわ屋をJavaScriptで動かしてみたいと思います。ちなみに、Excelで作成した図形は、全ての図形を選択してグループ化してコピーし、Firewoksを開いて、200px × 200pxで保存しました。文字盤以外にも、長針、短針、秒針も画像が必要なので、同様にExcelで作成し、これも200px × 200pxのサイズで、半径の位置に置いてPNG画像として保存しました。
http://takaiwa.net/archives/661
![]()
図1:長針
図2:短針
図3:秒針
秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
・アナログ時計をJavaScriptで作ってみたを基に、ライブラリであるjQueryRotateの
http://www.onside.com/blog/archives/2010/11/01/2992.html
・jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting安定バージョンv.1.7をダウンロードしてコーディングしました。
http://code.google.com/p/jqueryrotate/
<html> <head> <script type="text/javascript" src="./jquery-1.6.2.js"></script> <script type="text/javascript" src="./jQueryRotate.1.7.js"></script> <style type="text/css"> .clock_face { width: 200px; height: 200px; background-image: url("./clock_face.png"); position: relative; } .clock_hours, .clock_minutes, .clock_seconds { width: 200px; height: 200px; position: absolute; top: 0; left: 0; } </style> <script type="text/javascript"> $(function(){ // 初期化処理 analog_clock(); }); function analog_clock(){ today = new Date(); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); $('#clock_hours_hand').rotate(hour*30+minute/2); $('#clock_minutes_hand').rotate(minute*6+second/10); $('#clock_seconds_hand').rotate(second*6); setTimeout("analog_clock()",1000); } </script> </head> <body> <!-- 時計の画像 --> <div class="clock_face"> <div class="clock_hours"><img src="./clock_hours_hand.png" id="clock_hours_hand" /></div> <div class="clock_minutes"><img src="./clock_minutes_hand.png" id="clock_minutes_hand" /></div> <div class="clock_seconds"><img src="./clock_seconds_hand.png" id="clock_seconds_hand" /></div> </div> </body> </html>
デモ
Excelの図形でも、なんとか時計っぽく見えますね。。
MdN
売り上げランキング: 2158
はじめまして。
返信削除お問い合わせフォームなどがございませんでしたので、こちらにコメントします。
こちらに掲載されているjQueryの利用条件はございますでしょうか?
メールでどのような利用になるか説明したいのですが・・・よろしくお願い致します。