時計を作ってみる

単純なデジタル時計サンプルです。 デジタル時計ではなく、アナログ時計を作るには、時間に応じて針の角度を計算して下さい。

layout.xml

「date」という名前のテキスト表示領域と「time」という名前のテキスト表示領域を作成しているのがポイントです。 このサンプルでは、毎秒このテキスト表示領域の内容を書き換えています。

<?xml version="1.0" encoding="UTF-8"?>
<Widget>
  <Component name="widget">
    <Bitmap name="initial-bg"/>
    <Component name="normal">
      <Text name="date" x="-120" y="-40" size="32"/>
      <Text name="time" x="-100" y="0" size="32"/>
    </Component>
    <Component name="focus" visible="0">
    </Component>
    <Component name="active" visible="0">
    </Component>
  </Component>
</Widget>

widget.js

layout.xmlで定義した「date」と「time」というテキスト表示領域のノードにたいして、毎秒setStrを行っています。 毎秒setStrを行うために、setIntervalを利用して、displayTimeという自作関数を呼び出しています。

var nodeNormal = getNode("normal");
var nodeDateText  = getChildNode(nodeNormal, "date");
var nodeTimeText  = getChildNode(nodeNormal, "time");

function onLoad() {
  displayTime();

  setInterval(displayTime, 1000 /*1sec*/);
}

function onUpKey() {
}

function onDownKey() {
}

function onRightKey() {
}

function onLeftKey() {
}

function onConfirmKey(type) {
}

function onFocus() {
}

function onUnfocus() {
}

function onActivate() {
}

function displayTime() {
  var timestr = getCurrentTime();

  var year  = timestr.substring(0,4);
  var month = timestr.substring(4, 6);
  var day   = timestr.substring(6, 8);

  var hour   = timestr.substring(8, 10);
  var minute = timestr.substring(10, 12);
  var second = timestr.substring(12, 14);

  setStr(nodeDateText, year + "/" + month + "/" + day);
  setStr(nodeTimeText, hour + ":" + minute + ":" + second);
}

サンプルダウンロード

digitalClockSample.zip