スキップしてメイン コンテンツに移動

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

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

    返信削除

コメントを投稿

このブログの人気の投稿

Javaでprivateなfieldやmethodにアクセスする

JUnitでテストしてると、privateなフィールドにアクセスして、値を参照したりセットしたりしたくなるわけですが、よく使うのでメモしておきます。 例えば、次のような対象のクラスがあるとします。 public class ParentClass { private String hoge = "ParentClass!!"; public void dispMsg() { System.out.println("dispMsg:" + hoge); } private void privateDispMsg(String msg) { System.out.println("dispMsg:" + msg); } }

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。