時計のWidget

Widget iPod Touch Theme

時計を表示するWidget

適用画像


ファイル構成

MyTouchTheme/ Wallpaper.html ホーム画面を構成するHTML
MyTouchTheme/js TouchClock.js javascript
MyTouchTheme/css TouchClock.css スタイルシート

ソース

Wallpaper.html
<?xml version="1.0" encoding="UTF-8"?>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="JavaScript" src="js/TouchClock.js" ></script>
    <link rel="stylesheet" href="css/TouchClock.css">

  </head>
  <body>
    <div id="Date_Year">
    </div>
    <div id="Clock">
    </div>
    <script language="JavaScript"> UpdateTouchClock();setInterval('UpdateTouchClock()', 5 * 1000 )</script>
  </body>
</html>
TouchClock.js
var IS_AMPM = true;

function UpdateTouchClock()
{
  var curTime = new Date();

  var curHour = curTime.getHours();
  var curMin = curTime.getMinutes();

  if (IS_AMPM)
  {
    curMin = (curMin < 10 ? "0" : "") + curMin;
	curMin = curMin + "<span id=\"ampm\">" + (curHour <= 12 ? " AM" : " PM") + "</span>"
    curHour = (curHour <= 12 ? curHour : curHour - 12);
  }
  else
  {
    curHour = (curHour < 10 ? "0" : "") + curHour;
    curMin = (curMin < 10 ? "0" : "") + curMin;
  }

  var ret = curHour + ":" + curMin;

  document.getElementById("Clock").innerHTML = "";
  document.getElementById("Clock").innerHTML = ret;
}
TouchClock.css
div#Clock {
  position       : absolute;            /* 位置決め */
  top            : 10px;                /* 位置(上) */
  font-family    : Zapfino;             /* フォント */
  font-size      : 25px;                /* 文字の大きさ */
  letter-spacing : 0.0em;               /* 文字の間隔 */
  color          : #00bfff;             /* 文字の色 */
  text-shadow    : #6495ed 1px 1px 1px; /* 文字の影(色 縦方向 横方向 影の幅) */
}
span#ampm {
  vertical-align : super;               /* 上付き */
  font-size      : 12px;                /* 文字の大きさ */
}

ポイント

  • 更新周期は5秒なので、最大5秒の遅れがある。
  • JavascriptのIS_AMPMをfalseにすれば、24時間表示となる。