前回、Excelでゴリゴリ描いた文字盤（PNG画像）、
図１：長針
図２：短針
図３：秒針
秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
Excelの図形でも、なんとか時計っぽく見えますね。。
MdN
売り上げランキング: 2158
・Excelの図形を組み合わせて文字盤を作る方法 | たかいわ屋をJavaScriptで動かしてみたいと思います。ちなみに、Excelで作成した図形は、全ての図形を選択してグループ化してコピーし、Firewoksを開いて、200px × 200pxで保存しました。文字盤以外にも、長針、短針、秒針も画像が必要なので、同様にExcelで作成し、これも200px × 200pxのサイズで、半径の位置に置いてPNG画像として保存しました。
http://takaiwa.net/archives/661
図１：長針
図２：短針
図３：秒針
秒針は、何も表示されていないように見えますが、白色なので背景色を変えればわかります。
で、参考させていただいたサイト
・アナログ時計を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の利用条件はございますでしょうか？
メールでどのような利用になるか説明したいのですが・・・よろしくお願い致します。