setIntervalとclearInterval

  • このエントリーをはてなブックマークに追加
  • LINEで送る

WordPressの「ページ」を使って試しに何かを作ってみようとポートフォリオ的な何かを作った。

で、ぼんやり眺めていたら「ロールオーバーを滑らかにしたいな」と思ってしまった。

flashで言ったら、onrollover・out時にalphaをenterframeで減速処理とかかましたりするfunction作ってしまえばいいんだろうけど
javascriptでenterframeってなんだろう?

ライブラリを使えば簡単に実装できてしまうのだろうけど(幻想?)
せっかくだから最初はライブラリなしでやった方がいいだろう。

関係ないけど、こんなふう(もしくはいままでの記事の様)に物語風に書くと、後で読み返す時必要な情報にすぐアクセスしづらいかな、やっぱり。
箇条書きまではいかなくても「目的、現在の状態、目標(試行錯誤、これがいらない?)、方法・結果」みたいな部分をピックアップして書いていったほうがいいのかな。

調べてみたところjavascriptだと、どうやら setInterval を使うようだ。
どのブラウザでも使えるものなのだろうか…

とりあえず setInterval のテスト、トグルスイッチにしてみた。




[html]
<form id="form1" name="form1" method="" action="">
<label for="mxx">タイマー:</label>
<input type="text" name="mxx" id="mxx" />
<input name="btn1" type="button" value=" start/stop " onclick="ss()" />
</form>
[/html]
[js]
<script type="text/javascript">
var countNum=0;
var timerID=0;
var onoff=0;
window.onload=function(){
t_area=document.getElementById("form1");
//console.log(onoff);
}
function ss(){
onoff=!onoff;
if(onoff){
timerID=window.setInterval(anime,100);
//console.log(onoff);
}else{
window.clearInterval(timerID);
//console.log(onoff);
}
}
function anime(){
countNum++;
t_area.mxx.value=countNum;
}
</script>
[/js]

次はこれを改造して、ロールオーバーしたらopacityを0.80へ、ロールアウトで1.00にすればいいのよね?

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.