2010年05月12日

JavaScript setTimeout , clearTimeout

スポンサード リンク

 setTimeout();
設定した時間のあとに処理を実行します。

setTimeout("fanc()",msec)

サンプルソース

<html>
 <head>
  <title>setTimeout()</title>
<style type="text/css">
<!--
#msgbox{ /*文字列表示ボックスのスタイル*/
  font-size:20 px;
  color: green;
  width: 520px;
  font-weight: bold;
  border: 1px solid gray;
  padding: 5px;
 }
       /*上記のスタイルは動作に関係なし*/
-->
</style>

<script language="JavaScript">
<!-- //javascript123
 var msg = new Array(); //表示するメッセージの配列
  msg[0]="JavaScript (ジャバスクリプト) サンプル";
  msg[1]="CSS(スタイルシート) サンプル";
  msg[2]="clearTimeout() 設定したタイマーを解除する";

 var flag= false;
 var i= 0;
 var msec= 1500;//指定ミリ秒

function toguru(){//条件によって実行、停止を切り替え
 (flag == false)?flag = true: flag = false;
 if(flag==true){
  document.getElementById("botan").value = "ストップ"; //ラベルの変更
  chgmsg();
 }
else{
 document.getElementById("botan").value ="スタート";
 clearTimeout(Timer);
     }
  }

function chgmsg(){//指定時間でメッセージ切り替え
 document.getElementById("msgbox").innerHTML = msg[i];//文字列変更
 i++;
  if(i==msg.length){i=0;}
    Timer=setTimeout("chgmsg()",msec);
  }
// -->
</script>
</head>
<body>
<p id ="msgbox">setTimeout("fanc()",msec)</p>
<input type="button" id ="botan" value="スタート" onclick="toguru()"><p>
</body>
</html>

Timer=setTimeout("chgmsg()",msec);
 指定した msecミリ秒が経過すると chgmsg()を実行します。
clearTimeout(Timer);
 Timer=setTimeout(); で設定したタイマーをキャンセルします。
条件分岐
(flag == false)?flag = true: flag = false;
  条件が真なら1つ目の文、偽なら2つ目の文を実行します。
サンプルではflagがtlueの場合chgmsg()配列変数msg[i]
格納されている文字列を順番に表示していきます。
flagがfalseであればclearTimeout();でタイマーを解除して停止します。

トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
配列 javascript
setTimeout() 文字がフェードイン,フェードアウトします
setTimeout() 文字の拡大 縮小
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 20:41 | 大阪 ☁ | ウインドウ | このブログの読者になる | 更新情報をチェックする

2010年01月17日

window.prompt( ) メソッド

スポンサード リンク

window.prompt( ) メソッド 入力ダイアログ
ユーザーに入力を求めます。

ここに入力文字列を表示


無料レンタルカウンター「デジデジ」

サンプルソース

<html>
<head>
<title>入力(prompt)ウィンドウ</title>
<script type="text/javascript">
<!--
function $pmt(){
 var msg;
  msg=prompt("ここに貴方の\n\tお名前を入れて下さい","鳩海由紀子");

  if(msg==null){ // キャンセルボタンが押されたとき
   alert("キャンセルされました。\n\t"+msg);
     }

else if(msg==""){ //入力欄が空白の場合
 msg="名無しの権兵衛さん ようこそ!";
  document.getElementById("boon").innerHTML=msg;
    }

else{ //入力されている場合,入力文字列を表示
 document.getElementById("boon").innerHTML=
  "<span style='font-weight : bold;color : green;'>"
   +msg+"</span> さん。ようこそ ここへ..♪";

     }
  }
//-->
</script>

</head>
<body>
  <form>
   <input type="button" value="入力ボックスを表示" onclick="$pmt()">
 </form>
   <div id="boon">ここに入力文字列を表示</div>
</body>
</html>

入力ダイアログ
prompt メソッドは 入力ボックスと「OK」,「キャンセル」の
     ボタンを持った入力ダイアログを表示します。「OK」を押すと 
入力されている場合はその値を、空のときは空白の文字列を戻します。
「キャンセル」か[×]ボタンを押すと null を返します。

msg=prompt("こんにちは貴方の\n\tお名前を入れて下さい","鳩海由紀子");
 書き方は  msg=prompt("第一引数","第二引数");
 第一引数に入力を促すメッセージを、 第二引数に入力ボックスに最初から表示する
文字列を書きます。表示しない場合は("")のままです。
\n で改行、\t で字下げすることができます。

innerHTML プロパティを使って指定した場所に入力文字列を書き込みます。
document.getElementById("boon").innerHTML=
  "<span style='font-weight : bold;color : green;'>"
   +msg+"</span> さん。ようこそ ここへ..♪";
上記のinnerHTMLを実行すると
ID名が"boon"と付けられた要素に下のように書き込みます。

 鳩海由紀子 さん。ようこそ ここへ..♪

詳しくはinnerHTMLサンプルをご覧ください。

if (条件式) JavaScriptとCSSで指定した要素の表示/非表示
警告ダイアログ alert( )メソッド
window.confirm() 確認ダイアログ
innerHTMLプロパティ
ボタン
OnClick イベントハンドラ

お手頃価格でビジネスサイト運営者様をしっかりサポート!
さくらのレンタルサーバ ビジネスプロ
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 21:12 | 大阪 ☀ | ウインドウ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。