Android、Java、Web系、Linux、マラソン等の備忘録

2011/07/28

jQueryのライブラリでIEでも動くアナログ時計を作成してみた

1 件のコメント
前回、Excelでゴリゴリ描いた文字盤(PNG画像)、
・Excelの図形を組み合わせて文字盤を作る方法 | たかいわ屋
http://takaiwa.net/archives/661
clock_face
をJavaScriptで動かしてみたいと思います。ちなみに、Excelで作成した図形は、全ての図形を選択してグループ化してコピーし、Firewoksを開いて、200px × 200pxで保存しました。文字盤以外にも、長針、短針、秒針も画像が必要なので、同様にExcelで作成し、これも200px × 200pxのサイズで、半径の位置に置いてPNG画像として保存しました。

clock_minutes_hand
図1:長針 

clock_hours_hand
図2:短針 

clock_seconds_hand
図3:秒針

秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
・アナログ時計をJavaScriptで作ってみた
http://www.onside.com/blog/archives/2010/11/01/2992.html
を基に、ライブラリであるjQueryRotateの
・jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting
http://code.google.com/p/jqueryrotate/
安定バージョンv.1.7をダウンロードしてコーディングしました。
<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の図形でも、なんとか時計っぽく見えますね。。



1 件のコメント :

  1. はじめまして。
    お問い合わせフォームなどがございませんでしたので、こちらにコメントします。
    こちらに掲載されているjQueryの利用条件はございますでしょうか?
    メールでどのような利用になるか説明したいのですが・・・よろしくお願い致します。

    返信削除