メモの日々


2005年05月29日(日) [長年日記]

[javascript] JavaScriptで定期的にHTMLを書き換える

2年ぶりにJavaScriptを使った。今回は、JavaScriptを使ってHTMLの内容を定期的に書き換える処理を行いたい。

JavaScriptのことは何も覚えていないので、まず参考になるサイトを見つける必要がある。JavaScriptの言語仕様やAPIについては

を見るのがよさそう。HTMLにJavaScriptをどのように埋め込めばいいのかについてはHTMLの仕様書内に説明があった。

HTMLの書き換えはDOMを使えばできそうで、仕様書内の

を参照すればよさそう。あとここも見た。

JavaScriptでのタイマー処理は標準では規定されていないようで、

を参照した。

で、出来上がったのはこれ。1秒毎にテーブルの内容を書き換えるだけ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<title>1秒毎にテーブルの内容を書き換える</title>
<link rel="stylesheet" href="/kenichi.css" type="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!-- JavaScript start
var timerId;

function init() {
  timerId = setTimeout("modifyTable()", 1000);
}

function finish() {
  clearTimeout(timerId);
}

function modifyTable() {
  var myTable = document.getElementById("myTable");
  var cell = myTable.rows.item(0).cells.item(1);

  var v = cell.firstChild.nodeValue;
  cell.firstChild.nodeValue = parseInt(v) + 1;

  timerId = setTimeout("modifyTable()", 1000);
}
// JavaScript end -->
</script>
</head>
<body onload="init()" onunload="finish()">
<h1>1秒毎にテーブルの内容を書き換える</h1>
<table id="myTable">
  <tr>
    <td>Time</td><td>0</td>
  </tr>
</table>
</body>
</html>

やること

  • リンク元のスリム化
  • tDiaryバージョンアップ
  • FSWikiバージョンアップ
  • オーブンレンジ用べんり棚
  • ブラウンの安い電動歯ブラシ買う
  • 蛍光灯を捨てる
  • 家賃
  • 健康保険料