FC2ブログ

負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ


main main2

マウスカーソルを画像の上に重ねると、画像が入れ替わるロールオーバー画像の作成が今回のお題です。

ロールオーバー画像はonmouseoverと、onmouseoutの2つのイベントを使って作ります。

書式

onmouseover="処理" … マウスカーソルが画像の上に乗ったとき
onmouseout="処理" … マウスカーソルが画像から離れたとき


ソース

<img src="main.gif" width="213" height="240" border="0" onmouseover="this.src='main2.jpg' "onmouseout="this.src='main.gif'">
src … 画像のソースを記述
width … 画像の横幅
height … 画像の縦幅
border … 画像の枠線(ボーダー)の太さ
onmouseover … マウスカーソルが上にのったとき
onmouseout … マウスカーソルが離れたとき

this.src … このタグのsrcの中身を指定。
この場合は<img>タグ内のsrc要素の画像アドレス(xxx.jpg)を書き換える。


サンプル


setTimeout() 書式・説明

タイマーID = setTimeout(処理,ミリ秒)
タイマーID = window.setTimeout(処理,ミリ秒)
タイマーID = フレームオブジェクト.setTimeout(処理,ミリ秒)

指定されたミリ秒後にし指定された処理を1度だけ実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearTimeout()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です
timerID = setTimeout("myFunc()",1000);




setInterval() 書式・説明

タイマーID = setInterval(処理, ミリ秒)
タイマーID = window.setInterval(処理, ミリ秒)
タイマーID = フレームオブジェクト.setInterval(処理, ミリ秒)

指定されたミリ秒ごとに指定された処理を一定の間隔で実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearInterval()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です
timerID = setInterval("myFunc()",1000);



リアルタイムに動く時計を作ってみよう


それでは、setIntervalを使ってリアルタイムに動く時計を作ってみましょう。
サンプルの流れは次の通りです。

ページ全体の処理

ページがロードされた瞬間に

setInterval()で関数tokei()を1秒毎に実行


関数tokei()内部の処理

日時の値が入っているDateオブジェクトを生成

id = "result"を検索して、そのHTML内に日時を入れる



ソース


window.onload = function() {
timerID = setInterval("tokei()",1000);
}

function tokei() {
dt=new Date();
document.getElementById("result").innerHTML = dt + "<br>";

}

↓↓↓
<div id="result"></div>
↑↑↑
window.onload … ページをロードした瞬間に実行
setInterval() … 一定の間隔でタイマーを実行

new Date() … 日時情報が入ったDateオブジェクトを生成
getElementById() … id名を検索
innerHTML … HTMLタグをその中に記述できる要素

id="" … id名を指定。ここにタイマーが表示される。
関数「function」を使う主なメリット3つは次のとおりです。

関数のメリット
1・ プログラム中に何度も出てくるコードが1つにまとまる
2・ 使い方は関数名を呼びだすだけ
3・ 何度でも同じ動作

↓↓↓

関数を使うと、コードが大幅に短くなります!
さらに、プログラムの修正やメンテナンスが簡単になります!





関数を作成する(宣言する)

関数を作成
function 関数名(引数) {
処理;
}



3つの引数を足してダイアログに表示するサンプル

<script type="text/javascript">
<!--

function kansu(a,b,c) {

n = a + b + c;
alert(n);

}

kansu(10,20,30);


// -->
</script>



kansu()という関数を作る。
引数はa,b,cの3つ。

a + b + c の結果を n に代入。
n をダイアログ表示


関数kansu()を実行。



戻り値(return)を用いたサンプル

<script type="text/javascript">
<!--

function kansu(a,b,c) {

n = a + b + c;
return n;


}

function poppo() {

jinrai = kansu(10,20,30);
alert(jinrai);


}

poppo();

// -->
</script>



kansu()という関数を作成。引数はa,b,c。

a + b + c の結果を n に代入。
戻り値を n に設定。


poppo()という関数を作成。

kansu()を実行。戻り値を jinrai に代入。
ダイアログで jinrai を表示




関数poppo()を実行。

カレンダー

08 | 2019/09 | 10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム