あむちょです。

たまにはHTML5に触れないと忘れてしまいそうなので、実際に動く時計をつくりました。

最近はもっぱらpebble用のwatch faceばかり作ってますが、持ってない人にはサッパリ分からないと思います。

なので、Pebble布教活動の一環として、HTML5とJavascriptで実際に動くサンプルを作りました。

今回やったこと

• リロードせずに、画像とiframeの切り替え
• Javascriptによる現在時刻の所得

まだスマホに最適化してないので、スマホだとスクロールしないとボタンが見えません。以下のリンクからできます。

Pebble Watch Face

どれくらい分かりにくい時計か分かって頂けると思う。ボタンを押すと、画面を更新することなく切り替わります。

リロードせずに、画像とiframeの切り替え

画像の切り替えは、まずイメージタグに固有のidをふる。

<br />
&amp;lt;img id=&amp;quot;image&amp;quot; alt=&amp;quot;&amp;quot; src=&amp;quot;hoge.png&amp;quot; width=&amp;quot;100&amp;quot; height=&amp;quot;100&amp;quot; /&amp;gt;<br />

次にボタンが押された時に、Javascriptのメソッドを呼ぶ。

<br />
&amp;lt;a onclick=&amp;quot;changeImage(&#8216;hugahuga.png&#8217;)&amp;quot;&amp;gt;ボタン&amp;lt;/a&amp;gt;<br />

Javascript側でidからimgタグを特定し、srcを切り替える

<br />
function changeImage(fileName){<br />
    document.getElementById(&amp;quot;image&amp;quot;).src = fileName;<br />
}<br />

これでボタンを押すと画像が切り替わります。iframeもまったく同じ方法です。

お次は

Javascriptによる現在時刻の所得

まずDateオブジェクトを生成。

var time = new Date();

あとはそれぞれ

時間 : time.getHours();
分 : time.getMinutes();
秒 : time.getSeconds();

で求まります。

HTML5による描画に関しては、過去に作ったやつでも見てください。
HTML5×Javascript

さあみんなもPebbleで遊ぼう

[ad][ad]