JavaScriptサンプル

更新:

JavaScriptサンプル。

古いメモ。
タイマー
	timerStr = setTimeout("関数名", イベント発生ミリ秒)
	clearTimeout(タイマーID);
	
		function strScroll(){
			timerStr = setTimeout("strScroll()", 200);
			
			if(i == 100){
				clearTimeout(timerStr);
			}
			
			i++;
		}

■文字列
	・文字列の連結
		i = 1 + 2;
		iは、「3」になる
		
		i = "1" + "2";
		iは、「12」になる。
		
		i = "あ" + "か";
		iは、「あか」になる。

	・文字列の分割
		str.substring(開始文字位置, 終了文字位置)
		どちらも先頭からのバイト数

		str = "テスト";
		str.substring(0, 2);

	・文字列の長さ・バイト数
		str = "テスト";
		i = str.length;
	
	・文字一致、検索
		indexOf("検索対象文字列", 検索開始位置)
		一致した場合は、一致した位置(先頭からのバイト数 0以上)
		一致しない場合は、-1。
		
		lastIndexOf("検索対象文字列", 検索開始位置)
		一致した場合は、一致した位置(後方からのバイト数 0以上)
		一致しない場合は、-1。
		
		str = "Mozilla/5.0 (Windows; U; Windows NT 5.2; ja-JP; rv:1.7.7) Gecko/20050414 Firefox/1.0.3"
		i = str.indexOf("FireFox", 0);
	
	・置換
		replace("置換前の文字", "置換後の文字")
		
		str = "ABC TEST SAMPLE";
		str = str.replace("TEST", "テスト");

■配列
	strArray = new Array("A", "B", "C", "D", "E");
	strA = strArray[0];

■日付・時刻
	・現在の日時
		nd = new Date();
		dy = nd.getYear();
		dm = nd.getMonth() + 1;
		dd = nd.getDate();
		hh = nd.getHours();
		hm = nd.getMinutes();
		hs = nd.getSeconds();
	・ページ、ファイルの最終更新日
		lm = document.lastModified;

■右クリック禁止
	・onContextmenu="return false"で右クリックした時に、
	 コンテキストメニューが表示されないようになります。
	・ページのソースを見せないようにする場合などに使用。
	・ブラウザのメニューバー(URL)を表示させないようにしたり、
	 他にも対策が必要です。
	 (メニューバーなしのウィンドウを開いて、そこに画像を表示したなど)
	 ただし、完全に保護できる分けではありません。
	<HTML>
	<HEAD></HEAD>
	<BODY onContextmenu="return false">

	<IMG SRC="jscript/others/0039.jpg" onMousedown="javaScript:alert('保存禁止です');">

	</BODY>
	</HTML>

■ダイアログ
	・警告ダイアログ、アラート
		<A HREF="JavaScript:void(0);" onClick="alert('警告ダイアログ');">リンク</A>
	・確認ダイアログ
		<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function dispWin(){
			choice = confirm("確認ダイアログ");
			if(choice == true){
				alert("OK選択");
			}else{
				alert("キャンセルを選択");
			}
		}
		//-->
		</SCRIPT>
	・入力ダイアログ / prompt("メッセージ", "入力欄の文字")
		<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function win(){
			choice = prompt("文字を入力して下さい。", "");
			if(choice == "cylas"){
				alert("正解");
			}else{
				alert("不正解");
			}
		}
		//-->
		</SCRIPT>
	・印刷ダイアログ
		<FORM NAME="form">
		<INPUT TYPE="button" VALUE="印刷" onClick="print();">
		</FORM>

■ページの背景色変更
	<FORM NAME="form">
	<INPUT TYPE="button" VALUE=" 赤 " onClick="document.bgColor='#FF0000'">
	<INPUT TYPE="button" VALUE=" 緑 " onClick="document.bgColor='#00FF00'">
	<INPUT TYPE="button" VALUE=" 青 " onClick="document.bgColor='#0000FF'">
	<INPUT TYPE="button" VALUE=" 白 " onClick="document.bgColor='#FFFFFF'">
	</FORM>

■ページジャンプ、location
	document.location = "http://example.com/";
	
	・例
		<FORM NAME="form">
		<SELECT NAME="box" onChange="document.location=options[this.selectedIndex].value">
		<OPTION VALUE="void(0);" selected>サイトを選択
		<OPTION VALUE="./html/index.html">HTMLのページ
		<OPTION VALUE="http://example.com/">http://example.com/
		</SELECT>
		</FORM>





==================== ブラウザ(Browser)関連 ====================

■ブラウザ情報
	・エージェント / Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;)など
		agent = navigator.userAgent;
	・アプリケーション名 / Microsoft Internet Explorerなど
		name = navigator.appName;
	・バージョン / 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;)
		ver = navigator.appVersion;
	・言語 / jaなど、IEの場合undefined
		lang = navigator.language;
	・コードネーム / Mozillaなど
		code = navigator.appCodeName;

■参照元URL、リファラ、Referer
	referrer = " + escape(document.referrer);

■戻る
	・ブラウザの履歴にある前のページに戻る
		<A HREF="javaScript:history.back();">戻る</A>

■進む
	・ブラウザの履歴にある先のページに進む
		<A HREF="javaScript:history.forward();">進む</A>

■お気に入りに追加、ブックマークに追加、Favorite
	・フォームボタンの例
		<FORM>
		<INPUT TYPE="button" VALUE="お気に入りに追加" onClick="window.external.addFavorite('http://example.com/','OshimaExe');">
		</FORM>
	・リンクの例
		<A HREF="javaScript:window.external.addFavorite('http://example.com/','OshimaExe');">お気に入りに追加</A>

■ステータスバーに表示
	status = "サンプル";





==================== ウィンドウ(Window)関連 ====================

■ウィンドウを開く、新規作成、新規ウィンドウをオープン
	<A HREF="JavaScript:void(0);" onClick="dispWin();">リンク</A>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	msg = "ウィンドウオープン。<BR>HTMLファイルは不要。"
	function dispWin(){
		helpwin = window.open("", "", "status=yes, WIDTH=300, HEIGHT=100");
		helpwin.document.open();
		helpwin.document.write("<HTML><BODY>");
		helpwin.document.write(msg);
		helpwin.document.write("</BODY></HTML>");
		opwin.document.close();
	}
	//-->
	</SCRIPT>

■ウィンドウを閉じる
		<A HREF="javaScript:close();">閉じる</A>

■ウィンドウをスクロール
	scroll(X座標, Y座標);
	scroll(100, 100);
	document.sample.scroll(100, 100);

■ウィンドウ・マウスの座標位置
	・マウスの現在座標表示例
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
			function xyCheck(myEvent){
				status = "座標:" + window.event.clientY;
			}
			
			document.onmousedown = xyCheck;
		//-->
		</SCRIPT>
	・IE系の場合
		X座標 window.event.clientX
		Y座標 window.event.clientY
		スクロールした状態でのX座標 document.body.scrollLeft
		スクロールした状態でのY座標 document.body.scrollTop
	・Netscape6系の場合
		X座標 myEvent.clientX
		Y座標 myEvent.clientY
		スクロールした状態でのX座標 window.pageXOffset
		スクロールした状態でのY座標 window.pageYOffset
	・Netscape4系の場合
		X座標 myEvent.x
		Y座標 myEvent.y

■キーボードの押されたキー番号の取得(キーコード)
	・マウスの現在座標表示例
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
			function keyCheck(myEvent){
				status = "keyCode:" + event.keyCode;
			}
			
			document.onkeydown = keyCheck;
		//-->
		</SCRIPT>
	・IE系の場合
		event.keyCode
	・Netscape系の場合
		myEvent.which

■ディスプレイ情報
	・ディスプレイ横幅
		screenWidth = screen.width;
	・ディスプレイ縦幅
		screenHeight = screen.height;
	・ディスプレイ色数
		colorDepth = screen.colorDepth;





==================== フォーム(Form)関連 ====================

■フォームのテキストボックスにカーソルを移動
	<HTML>
	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	function Box_Select(){
		document.imgwh.imgurl.select();
	}
	//-->
	</SCRIPT>
	</HEAD>
	<BODY onLoad="Box_Select();">

	<FORM NAME="imgwh">
	<INPUT TYPE="text" NAME="imgurl">
	</FORM>

■フォームの値を受け取る
	document.midform.bgmmid.value
	
	・例
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function hyouji(){
		if(document.midform.bgmmid.value == "no") exit;

			var opwin = window.open("", "", "WIDTH=300, HEIGHT=30");
			opwin.document.open();
			opwin.document.write("<EMBED SRC=" + document.midform.bgmmid.value + " LOOP=true AUTOSTART=true>");
			opwin.document.close();

		}
		//-->
		</SCRIPT>

		<FORM NAME="midform">
		<SELECT NAME="bgmmid" onChange="hyouji();">
		<OPTION VALUE="no" selected>音楽選択
		<OPTION VALUE="beyer090.mid">beyer090.mid
		<OPTION VALUE="beyer091.mid">beyer091.mid
		<OPTION VALUE="beyer092.mid">beyer092.mid
		<OPTION VALUE="beyer093.mid">beyer094.mid
		<OPTION VALUE="beyer094.mid">beyer094.mid
		</SELECT>
		</FORM>

■ボタン、テキストボックスなどの無効化
	・ボタンを押せなくする
	・テキストボックスに入力できないようにする
	・テキストボックスなど入力欄を無効化して送信すると、値が送信されない。
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
			function disabledFalse(){
				document.form1.text1.disabled = false;
				document.form1.button1.disabled = false;
				document.form1.submit1.disabled = false;
			}
			function disabledTrue(){
				document.form1.text1.disabled = true;
				document.form1.button1.disabled = true;
				document.form1.submit1.disabled = true;
			}
			function formSubmit(){
				document.form1.submit();
				document.form1.button1.disabled = true;
				document.form1.submit1.disabled = true;
			}
		//-->
		</SCRIPT>

		<FORM NAME="form1" METHOD="POST" ACTION="./test.php" onSubmit="formSubmit();">
		<INPUT TYPE="text" NAME="text1" VALUE="テキスト" disabled>
		<INPUT TYPE="button" NAME="button1" VALUE="ボタン" onClick="formSubmit();" disabled>
		<BR>
		<INPUT TYPE="button" VALUE="無効" onClick="disabledTrue();">
		<INPUT TYPE="button" VALUE="有効" onClick="disabledFalse();">
		<BR>
		<INPUT TYPE="radio" NAME="radio1" VALUE="0" onClick="disabledTrue();" CHECKED>了承しない
		<INPUT TYPE="radio" NAME="radio1" VALUE="1" onClick="disabledFalse();">了承する
		<BR>
		<INPUT TYPE="submit" NAME="submit1" VALUE="送信" disabled>
		</FORM>

■画像の縦横サイズを取得
	・テキストボックスに画像のファイル名またはパスを入力して、
	 「表示」ボタンを選択すると画像が表示される。
	・ステータスバーに画像の縦横サイズを表示。
	・画像上にマウスをあわせると画像上のマウスの現在位置を取得
		<HTML>
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function Disp_Page(){
			document.images[0].src = document.imgwh.imgurl.value;
		}
		function Img_Width_Height(){
			status = "WIDTH = " + document.images[0].width + "  ,  " + "HEIGHT = " + document.images[0].height;
		}
		function Img_X_Y_Disp(){
			status = "X座標 = " + (event.x) + "  ,  " + "Y座標 = " + (event.y-10);
		}
		function Img_X_Y_Reset(){
			Img_Width_Height();
		}
		//-->
		</SCRIPT>
		<BODY>

		<FORM NAME="imgwh">
		<INPUT TYPE="text" NAME="imgurl">
		<INPUT TYPE="button" NAME="disp" VALUE="表示" onClick="Disp_Page();">
		</FORM>

		<IMG SRC="" STYLE="position:relative; top:10; left:0;"
			onLoad="Img_Width_Height();"
			onClick="Img_X_Y_Disp();"
			onMouseOut="Img_X_Y_Reset()">

		</BODY> 
		</HTML>





==================== クッキー(Cookie)関連 ====================

■クッキー基本設定
	・サンプルの操作手順
		1. テキストボックスに文字を入力
		2. [Cookie設定/変更]を選択
		3. [リセット]を選択して、文字を消去
		4. [Cookie読み込み]を選択
		5. 最初にテキストボックスに入力した内容が復活
		6. [Cookie削除]を選択
		7. [Cookie読み込み]を選択しても、何も表示されない
	・例1(基本設定)
		<HTML>
		<BODY>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function setCookie(){
			document.cookie = escape(document.sample1.name1.value);
		}
		function getCookie(){
			document.sample1.name1.value = unescape(document.cookie);
		}
		function deleteCookie(){
			document.cookie = "";
			document.sample1.name1.value = "";
		}
		//-->
		</SCRIPT>

		<FORM NAME="sample1">
		<INPUT TYPE="text" NAME="name1"><BR>
		<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
		<INPUT TYPE="reset"><BR>
		</FORM>

		</BODY>
		</HTML>
	・例2(時間設定:クッキーが消える時間を指定)
		<HTML>
		<BODY>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function setCookie(){
			nd1 = new Date();
			
			//現在の時間から7日後の時間をセット
			nd1.setTime(nd1.getTime() + (24 * 60 * 60 * 1000 * 7));
			
			//GMT形式に変換
			expires = nd1.toGMTString();
			str1 = document.sample2.name1.value;
			
			//テキストボックスの内容を「a1」という名前をつけてCookieに保存
			//「a1=テキストボックスの内容;expires=有効期限」という形式でCookieをセット
			//「a1=」は「str1=」など好きな名称でいいが、「expires=」という書き方は決まり
			if(str1 != null && str1 != ""){
				document.cookie = "a1=" + escape(str1)
					+ ";expires=" + expires;
			}
		}
		function getCookie(){
			//Cookie内の「=」で区切られたデータを「=」を境に分割し、配列splitdataする
			//splitdata[0]が「a1」、splitdata[1]が「テキストボックスに入力した内容」
			splitdata = document.cookie.split("=");

			if(splitdata[1] != null && splitdata[1] != ""){
				//splitdata[1]の内容をテキストボックスにセット
				//escapeした内容を元に戻すためにunescape
				document.sample2.name1.value = unescape(splitdata[1]);
			}

			if(splitdata[1] == null || splitdata[1] == ""){
				document.sample2.name1.value = "";
			}
		}
		function deleteCookie(){
			nd2 = new Date();
			
			//現在より過去の時間をセット
			nd2.setTime(nd2.getTime() - 1);
			
			//cookieの項目「a1」の有効期限を過去の時間に設定することにより「a1」のCookie情報が消える
			document.cookie = "a1=;expires=" + nd2.toGMTString();
			document.sample2.name1.value = "";
		}
		//-->
		</SCRIPT>

		<FORM NAME="sample2">
		<INPUT TYPE="text" NAME="name1"><BR>
		<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
		<INPUT TYPE="reset"><BR>
		</FORM>

		</BODY>
		</HTML>
	・例3(複数項目設定:複数の情報をクッキーに保存)
		<HTML>
		<BODY>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function setCookie(){
			nd1 = new Date();
			
			//現在の時間から7日後の時間をセット
			nd1.setTime(nd1.getTime() + (24 * 60 * 60 * 1000 * 7));
			
			//GMT形式に変換
			expires = nd1.toGMTString();
			str1 = document.sample3.name1.value;
			str2 = document.sample3.name2.value;
			
			
			//テキストボックス1の内容を「a1」、テキストボックス2の内容を「a2」という名前をつけてCookieに保存
			//まず「a1=テキストボックス1の内容;expires=有効期限」という形式でCookieをセット
			//「a1=」は「str1=」など好きな名称でいいが、「expires=」という書き方は決まり
			//続けて「a2=テキストボックス2の内容;expires=有効期限」という形式でCookieをセット
			if(str1 != null && str1 != ""){
				document.cookie = "a1=" + escape(str1)
					+ ";expires=" + expires
			}
			
			if(str2 != null && str2 != ""){
				document.cookie = "a2=" + escape(str2)
					+ ";expires=" + expires;
			}
		}
		function getCookie(){
			//Cookie内の「; 」で区切られたデータを「; 」ごとに分割し、配列splitdataにする
			//splitdata[0]は「a1=テキストボックス1に入力した内容」
			//splitdata[1]は「a2=テキストボックス2に入力した内容」
			splitdata = document.cookie.split("; ");
			
			if(splitdata[0] != null && splitdata[0] != ""){
				//splitdata[0]の「=」で区切られたデータを「=」を境に分割し、配列s0にする
				//s0[0]が「a1」、s0[1]が「テキストボックス1に入力した内容」
				s0 = splitdata[0].split("=");
				
				//s0[1]の内容をテキストボックスにセット
				//escapeした内容を元に戻すためにunescape
				//s1[1]も同様
				document.sample3.name1.value = unescape(s0[1]);
			}
			if(splitdata[1] != null && splitdata[1] != ""){
				s1 = splitdata[1].split("=");
				document.sample3.name2.value = unescape(s1[1]);
			}
			
			//何もセットされていないときは、空欄を表示
			if(splitdata[0] == null || splitdata[0] == ""){
				document.sample3.name1.value = "";
			}
			if(splitdata[1] == null || splitdata[1] == ""){
				document.sample3.name2.value = "";
			}
		}
		function deleteCookie(){
			nd2 = new Date();
			
			//現在より過去の時間をセット
			nd2.setTime(nd2.getTime() - 1);
			
			//cookieの項目「a1」の有効期限を過去の時間に設定することにより「a1」のCookie情報が消える
			//「a2」も同様
			document.cookie = "a1=;expires=" + nd2.toGMTString();
			document.cookie = "a2=;expires=" + nd2.toGMTString();
			document.sample3.name1.value = "";
			document.sample3.name2.value = "";
		}
		//-->
		</SCRIPT>

		<FORM NAME="sample3">
		<INPUT TYPE="text" NAME="name1"><BR>
		<INPUT TYPE="text" NAME="name2"><BR>
		<INPUT TYPE="button" VALUE="Cookie設定/変更" onClick="setCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie読み込み" onClick="getCookie();"><BR>
		<INPUT TYPE="button" VALUE="Cookie削除" onClick="deleteCookie();"><BR>
		<INPUT TYPE="reset"><BR>
		</FORM>

		</BODY>
		</HTML>





==================== フレーム(frame)関連 ====================

■別フレームのページ変更
	・左フレームのメニュー選択で、右フレームのページが変化。
	・top.フレーム名.document.location で変更する。
	・フレーム土台
		<HTML>
		<FRAMESET COLS="20%,*" FRAMEBORDER=1>
			<FRAME SRC="menu.htm" name="leftWin">
			<FRAME SRC="top.htm" name="rightWin">
		</FRAMESET>
		</HTML>
	・左フレーム
		<HTML>
		<HEAD>
		<FORM NAME="form">
		<SELECT NAME="box" onChange="top.rightWin.document.location=options[this.selectedIndex].value">
		<OPTION VALUE="top.html" selected>メニューを選択
		<OPTION VALUE="new.html">What's New
		<OPTION VALUE="profile.html">プロフィール
		</SELECT>
		</FORM>
		</BODY>
		</HTML>

■IFRAMEのページ変更
	<HTML>
	<BODY>

	<IFRAME SRC="1.htm" ID="MADO">1.htm</IFRAME>
	<BR>

	<FORM NAME="form">
	<SELECT NAME="box" onChange="MADO.location=options[this.selectedIndex].value">
	<OPTION VALUE="1.html" selected>1ページ
	<OPTION VALUE="2.html">2ページ
	</SELECT>
	</FORM>

	</BODY>
	</HTML>

■別フレームのフォーム内容変化
	・左フレームのリンク選択で、右フレームのテキストエリアの文字が変化。
	・フレーム土台
		<HTML>
		<FRAMESET COLS="20%,*" FRAMEBORDER=1>
		<FRAME SRC="menu.htm" name="leftWin">
		<FRAME SRC="top.htm" name="rightWin">
		</FRAMESET>
		</HTML>
	・左フレーム
		<HTML>
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		flag = 0;
		function test(n){
			if(n == 0) msg = "トップページ";
			if(n == 1) msg = "新着情報";
			if(n == 2) msg = "プロフィール";
			if(flag == 0) top.rightWin.form.tarea.value = msg;
		}

		function kara(){
			if(flag == 0) top.rightWin.form.tarea.value = "";
		}

		function idou(i){
			flag = i;
		}
		//-->
		</SCRIPT>
		<BODY>
		
		<A HREF="top.htm" TARGET="right" onMouseover="test(0);" onMouseout="kara();" onClick="idou(0);">トップページ</A>
		<BR>
		<A HREF="new.htm" TARGET="right" onMouseover="test(1);" onMouseout="kara();" onClick="idou(1);">What's New!</A>
		<BR>
		<A HREF="profile.htm" TARGET="right" onMouseover="test(2);" onMouseout="kara();" onClick="idou(1);">プロフィール</A>
		
		</BODY>
		</HTML>
	・右フレーム
		<HTML>
		<BODY>
		<FORM NAME="form">
		<TEXTAREA COLS=50 ROWS=5 NAME=tarea></TEXTAREA>
		</FORM>
		</BODY>
		</HTML>





==================== 画像関連 ====================

■画像の変更、画像の光る効果
	・例1
		<HTML>
		<BODY>

		<A HREF="../index.html" onMouseOver="img0();" onMouseOut="img1();">
		<IMG SRC="go00.gif" BORDER=0></A>

		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		nimg0 = new Image();
		nimg0.src = "go00.gif";
		nimg1 = new Image();
		nimg1.src = "go01.gif";
		
		function img0(){
		   document.images[0].src = "go01.gif";
		}
		function img1(){
		   document.images[0].src = "go00.gif";
		}
		//-->
		</SCRIPT>

		</BODY>
		</HTML>
	・例2
		<HTML>
		<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
		<!--
		function fover(imgsrc){
			imgsrc.src="jscript/image/go01.gif";
		}
		function fout(imgsrc){
			imgsrc.src="jscript/image/go00.gif";
		}
		//-->
		</SCRIPT>
		<BODY>

		<IMG SRC="jscript/image/go00.gif" onMouseOver="fover(this);" onMouseOut="fout(this);">

		</BODY>
		</HTML>





==================== 文字関連 ====================

■文字のスクロール
	<HTML>
	<BODY onLoad="textf();">

	<FORM NAME="form">
	<INPUT TYPE="text" NAME="box" SIZE=30>
	</FORM>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	msg = "          メッセージをスクロール。           ";
	function textf(){
	   msg = msg.substring(2, msg.length) + msg.substring(0, 2);
	   document.form.box.value = msg;
	   setTimeout("textf()", 400);
	}
	//-->
	</SCRIPT>

	</BODY>
	</HTML>

■文字のスクロール(時間別)
	<HTML>
	<BODY onLoad="textf();">

	<FORM NAME="form">
	<INPUT TYPE="text" NAME="box" SIZE=30>
	</FORM>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	nd = new Date();
	ndh = nd.getHours();
	switch(ndh){
		case 0:
			msg = "               午前0時です。               ";
			break;
		case 1:
			msg = "               午前1時です。               ";
			break;
		case 2:
			msg = "               午前2時です。               ";
			break;
	//中略
		case 22:
			msg = "               午後10時です。               ";
			break;
		case 23:
			msg = "               午後11時です。               ";
			break;
	}
	function textf(){
		msg = msg.substring(2, msg.length) + msg.substring(0, 2);
		document.form.box.value = msg;
		setTimeout("textf()", 400);
	}
	//-->
	</SCRIPT>

	</BODY>
	</HTML>

■リンク別の文字表示
	<HTML>
	<BODY>

	<FORM NAME="form">
	<INPUT TYPE="text" NAME="box" SIZE=30>
	<A HREF="index.htm" onMouseOver="textf(0);">リンク0</A>
	<A HREF="event.htm" onMouseOver="textf(1);">リンク1</A>
	<A HREF="script.htm" onMouseOver="textf(2);">リンク2</A>
	</FORM>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	function textf(x){
		if(x == 0) msg = "リンク0です。";
		if(x == 1) msg = "リンク1です。";
		if(x == 2) msg = "リンク2です。";
		document.form.box.value = msg;
	}
	//-->
	</SCRIPT>

	</BODY>
	</HTML>





==================== 時刻・時計関連 ====================

■時刻の表示(テキスト時計)
	<HTML>
	<BODY onLoad="clock();">

	<FORM NAME="form">
	<INPUT TYPE="text" NAME="box" SIZE=15>
	</FORM>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	function clock(){
		nd = new Date();
		h  = nd.getHours();
		m  = nd.getMinutes();
		s  = nd.getSeconds();
		document.form.box.value = h + ":" + m + ":" + s;
		setTimeout("clock()", 1000);
	}
	//-->
	</SCRIPT>

	</BODY>
	</HTML>

■時刻の表示(画像時計)
	<HTML>

	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--
	a = new Image();
	a.src = "a.gif";
	p = new Image();
	p.src = "p.gif";
	numa = new Array(9);
	for(i=0;i<=9;i++){
		numa[i] = new Image();
		numa[i].src = i + ".gif";
	}

	function clock(){
		nd = new Date();
		h = "0" + nd.getHours();
		m = "0" + nd.getMinutes();
		s = "0" + nd.getSeconds();
		h = h.substring(h.length-2, h.length + 1);
		m = m.substring(m.length-2, m.length + 1);
		s = s.substring(s.length-2, s.length + 1);
		h0 = h.substring(0, 1);
		h1 = h.substring(1, 2);
		m0 = m.substring(0, 1);
		m1 = m.substring(1, 2);
		s0 = s.substring(0, 1);
		s1 = s.substring(1, 2);
		if(h0 + h1 < 12){
			document.images[0].src = "a.gif";
		}else{
			document.images[0].src = "p.gif";
		}
		document.images[2].src = h0 + ".gif";
		document.images[3].src = h1 + ".gif";
		document.images[5].src = m0 + ".gif";
		document.images[6].src = m1 + ".gif";
		document.images[8].src = s0 + ".gif";
		document.images[9].src = s1 + ".gif";
		setTimeout('clock()', 1000);
	}
	//-->
	</SCRIPT>
	</HEAD>
	<BODY onLoad="clock();">

	<IMG SRC="a.gif"><IMG SRC="m.gif"><IMG SRC="0.gif"><IMG SRC="0.gif"><IMG SRC="c.gif"><IMG SRC="0.gif"><IMG SRC="0.gif"><IMG SRC="c.gif"><IMG SRC="0.gif"><IMG SRC="0.gif">

	</BODY>
	</HTML>





このエントリーをはてなブックマークに追加