つくもノヲ”Ｘ="1≠ 369
なにを思ったか、ふと劇場アニメ「時をかける少女」の「時かけクロック」が
頭に浮かび、ブログに設置してみたくなった。
それまでの白い背景をこの時計に合わせるために黒一色へ変更。
動作の仕組みについて。
予め用意してある数字の画像を、javascriptとCSS(カスケードスタイルシート)
によって動かしている。
時刻取得、表示のためのプログラムを前者が、レイアウトを後者が担っている。
だから両方の知識があることが必要になる。
「0～9」まで各数字が縦一列に連続している画像で、各数字の高さはそれぞれ32ピクセル。
javascriptの自作関数によって、例えば今年は08年なので、取得した8に32ピクセルを
乗じた分先にある位置する画像(つまり「8」)を表示する。
このルーチンをsetInterval関数によって、50ミリ秒間隔で繰り返し画像を表示している。
設置した「時かけクロック」は他の無料HPスペースに作成したページを
iframeで表示させている。
その際フレームを非表示にするだけでなく、無料HPスペースだけに表示されてしまう
広告バナーを(本当はHPスペースの利用規定違反だが)、CSSで表示しないようにしてある。
私が使っている無料HPスペースで表示される広告バナーは、HTMLソースで確認すると
iframeとtableが使われている。(無料HPスペースによって異なるだろう)
そのため、次のように<head>~</head>の間に次のCSSを挿入することで
ページ内に使われているiframeとtableを表示させないようにできる。
(このまま使うと、広告バナー以外で使っているものもすべて表示されないので注意。
その場合は表示させたいiframeとtableのクラスもここで指定する必要がある)
<head>
<style TYPE="text/css">
<!--
iframe{display: none;}
table{display: none;}
-->
</style>
</head>
ちなみにプログラムや画像は次のサイトから、勝手ながら使わせて頂いた。
Javascriptで時かけクロック
0 件のコメント:
コメントを投稿