Panda Noir

JavaScript の限界を究めるブログです。

Riotのコンポーネント作り2日目 -アナログ時計

約3ヶ月あきました。今回はアナログ時計を作りました。

<analog-clock></analog-clock>
<analog-clock hour="10" minute="10"></analog-clock>
<analog-clock utc="+10:30"></analog-clock>

こんな感じでつかいます。

使い方

属性を何も指定しないと、現在時刻を表示します。32fpsごとに更新されます。

hour、minute属性の両方を指定すると、その時刻を表示する時計を表示させます。この場合は32fpsごとの更新は起こりません。

utc属性を指定すると、そのUTCでの現在時刻を表示します。こちらも32fpsごとに更新されます。

hour、minuteを指定した場合、utc属性は効きません。意味がありませんからね。

コード

<analog-clock></analog-clock>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot.min.js"></script>
<script src="analog-clock.js"></script>
<script>
        riot.mount('analog-clock')
</script>

github.com