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

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の利用条件はございますでしょうか?
    メールでどのような利用になるか説明したいのですが・・・よろしくお願い致します。

    返信削除

コメントを投稿

このブログの人気の投稿

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で一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版

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); } }