HOMEへ
本HPはhttp://webyoutility.web.fc2.com/に移設しました！(現状7割)
サンプル一覧へ

JavaScriptサンプル

■最終更新日を自動的に更新
ページの最終更新日を自動的に表示するスクリプトです。
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
document.write("最終更新：",document.lastModified);
-->
</SCRIPT>

→サンプル表示←
■現在の時刻表示
訪問者がそのページに訪れた時間を自動的に表示するスクリプトです
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
var d_Now　=　new Date();
var d_Year = d_Now.getYear();
var d_Mon = d_Now.getMonth() + 1;
var d_Day = d_Now.getDate();
var d_Week = d_Now.getDay();
var d_Hour = d_Now.getHours();
var d_Min = d_Now.getMinutes();
var W = new Array(7);
W[0] = "Sun";
W[1] = "Mon";
W[2] = "Tue";
W[3] = "Wed";
W[4] = "Thr";
W[5] = "Fri";
W[6] = "Sat";

if(d_Hour < 10){
d_Hour = "0"+d_Hour;
}
if(d_Min < 10){
d_Min = "0"+d_Min;
}

document.write("現在："+d_Year+"年"+d_Mon+"月"+d_Day+"日("+W[d_Week]+") "+d_Hour+":"+d_Min)
-->
</SCRIPT>
→サンプル表示←
■リアルタイム時間の表示
テキストボックスにリアルタイムで時間を表示するスクリプトです。
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
document.write("<FORM NAME='clock'><INPUT TYPE='text' NAME='clock_box' SIZE=20></FORM>");
ClockDisplay();

function ClockDisplay(){
var d_Now = new Date();
var d_Hour = d_Now.getHours();
var d_Min = d_Now.getMinutes();
var d_Sec = d_Now.getSeconds();

if(d_Hour < 10){
d_Hour = "0"+d_Hour;
}
if(d_Min < 10){
d_Min = "0"+d_Min;
}
if(d_Sec < 10){
d_Sec = "0"+d_Sec;
}

document.clock.clock_box.value = d_Hour+"時"+d_Min+"分"+d_Sec+"秒";
setTimeout("ClockDisplay()",1000)
}
-->
</SCRIPT>
→サンプル表示←
■指定時間までのカウントダウン
指定時間までのカウントダウンを秒単位でリアルタイム表示するスクリプトです。
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
var s_Year=2000;
var s_Mon=1;
var s_Day=1;
var s_Hour=0;
var s_Min=0;
var s_Sec=0;
document.write(s_Year+"年"+s_Mon+"月"+s_Day+"日"+s_Hour+":"+s_Min+":"+s_Sec+"まで、あと");
document.write("<FORM NAME='clock'><INPUT TYPE='text' NAME='clock_box' SIZE=20>秒</FORM>");
ClockDisplay();

function ClockDisplay(){
var d_Now = new Date();
var d_Time = d_Now.getTime();
var s_Now = new Date();
var s_Time

s_Now.setYear(s_Year);
s_Now.setMonth(s_Mon-1);
s_Now.setDate(s_Day);
s_Now.setHours(s_Hour);
s_Now.setMinutes(s_Min);
s_Now.setSeconds(s_Sec);
s_Time=s_Now.getTime();

document.clock.clock_box.value = Math.round((s_Time-d_Time)/1000);
setTimeout("ClockDisplay()",1000)
}
// -->
</SCRIPT>
→サンプル表示←
■１つ前へ戻る
１つ前にアクセスしたページに戻るスクリプトです。
<A HREF="JavaScript:history.back();">１つ前へ戻る</A>
→サンプル表示←
■フェードイン
テキストをフェードインさせます。 
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 5;	//レイヤーの最大数
var actT = 100;	//移動時間：速＝小

var Comments = new Array();
Comments[1] = "<DIV CLASS='Style1'>Web@youtility<\/DIV>"
Comments[2] = "<DIV CLASS='Style1'>Dynamic HTMLによる<\/DIV>";
Comments[3] = "<DIV CLASS='Style1'>フェードイン！<\/DIV>";
Comments[4] = "<DIV CLASS='Style1'>フェード速度やフォントを<\/DIV>";
Comments[5] = "<DIV CLASS='Style1'>自由に設定できます。<\/DIV>";
Comments[6] = "<DIV CLASS='Style1'>他のサンプルもどうぞご覧下さい。<\/DIV>";

var lay = new Array();
ColorPLT = "fedcba9876543210";
var Count = 0;
var Com = 1;
var ColorF;

function Init(){
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].style.visibility = "visible";
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].visibility = "show";
		}
	}
	FadeIn();
}

function FadeIn(){
	if(Com <= Laymax){
		if(Count < ColorPLT.length){
			z = ColorPLT.charAt(Count);
			ColorF = z+z+z+z+z+z;
			SetColor(Com);
			Count++;
			setTimeout("FadeIn()",actT);
		}else{
			Com++;
			Count = 0;
			setTimeout("FadeIn()",actT);
		}
	}
}

function SetColor(kkk){
	if(iIE4){
		lay[kkk].style.color = ColorF;
		lay[kkk].innerHTML = Comments[kkk];
	}
	if(iNN4){
		lay[kkk].document.open();
		lay[kkk].document.fgColor = ColorF;
		lay[kkk].document.write(Comments[kkk]);
		lay[kkk].document.close();
	}
}
// -->
</SCRIPT>
→サンプル表示←
■フェードアウト
テキストをフェードアウトさせます。
■head部
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 5;	//レイヤーの最大数
var actT = 100;	//移動時間：速＝小

var Comments = new Array();
Comments[1] = "<DIV CLASS='Style1'>Web@youtility<\/DIV>"
Comments[2] = "<DIV CLASS='Style1'>Dynamic HTMLによる<\/DIV>";
Comments[3] = "<DIV CLASS='Style1'>フェードイン！<\/DIV>";
Comments[4] = "<DIV CLASS='Style1'>フェード速度やフォントを<\/DIV>";
Comments[5] = "<DIV CLASS='Style1'>自由に設定できます。<\/DIV>";
Comments[6] = "<DIV CLASS='Style1'>他のサンプルもどうぞご覧下さい。<\/DIV>";

var lay = new Array();
ColorPLT = "0123456789abcdef";
var Count = 0;
var Com = 1;
var ColorF;

function Init(){
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].innerHTML = Comments[i];
			lay[i].style.visibility = "visible";
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].document.open();
			lay[i].document.write(Comments[i]);
			lay[i].document.close();
			lay[i].visibility = "show";
		}
	}
	FadeIn();
}

function FadeIn(){
	if(Com <= Laymax){
		if(Count < ColorPLT.length){
			z = ColorPLT.charAt(Count);
			ColorF = z+z+z+z+z+z;
			SetColor(Com);
			Count++;
			setTimeout("FadeIn()",actT);
		}else{
			Com++;
			Count = 0;
			setTimeout("FadeIn()",actT);
		}
	}
}

function SetColor(kkk){
	if(iIE4){
		lay[kkk].style.color = ColorF;
		lay[kkk].innerHTML = Comments[kkk];
	}
	if(iNN4){
		lay[kkk].document.open();
		lay[kkk].document.fgColor = ColorF;
		lay[kkk].document.write(Comments[kkk]);
		lay[kkk].document.close();
	}
}
// -->
</SCRIPT>
■body部 
<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>
<DIV CLASS="Style1" ID="iL5"></DIV>
<DIV CLASS="Style1" ID="iL6"></DIV>
→サンプル表示←
■タイプライター
タイプライターのように、１文字ずつ順次表示していくスクリプトです。
■head部
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 5;	//レイヤーの最大数
var actT = 100;	//移動時間：速＝小

var actT = 300;					//表示速度：速＝小
Comments = "初めてのホームページ講座"";	//表示する文字列

var Word = 0;
var Count = -1;
var Char = "";

function Init(){
	if(iIE4){
		lay = document.all("iL1");
	}
	if(iNN4){
		lay = document.layers["iL1"];
	}
	Word = Comments.length;
	SelectedChar();
}

function SelectedChar(){
	if(Count <= Word){
		Count++;
		Char += Comments.charAt(Count);
		Writer();
		setTimeout("SelectedChar()",actT);
	}
}

function Writer(){
	if(iIE4){
		lay.innerHTML = Char;
	}
	if(iNN4){
		lay.document.open();
		lay.document.write("<DIV CLASS='Style1'>"+Char+"<\/DIV>");
		lay.document.close();
	}
}
// -->
</SCRIPT>
■body部
<DIV CLASS="Style1" ID="iL1"></DIV>
→サンプル表示←
■エンディングロール
テキストがフェードインしながら下からスクロールアップし、上の方でフェードアウトするスクリプトです。
■head部 
<STYLE TYPE="text/css">
<!--
.Style1{
	position:	absolute;
}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 5;		//字幕（レイヤー）数
var FadeStart = 300;	//フェードイン開始位置
var FadeEnd = 50;		//フェードアウト開始位置
var ScrSpeed = 10;		//スクロールスピード
var PLeft = 100;		//左位置
var PHeight = 50 ;		//レイヤー間隔（垂直方向）
var Comments = new Array();
Comments[1] = "<DIV CLASS='Style1'>Web@youtility<\/DIV>"
Comments[2] = "<DIV CLASS='Style1'>Dynamic HTMLによる<\/DIV>";
Comments[3] = "<DIV CLASS='Style1'>フェードイン！<\/DIV>";
Comments[4] = "<DIV CLASS='Style1'>フェード速度やフォントを<\/DIV>";
Comments[5] = "<DIV CLASS='Style1'>自由に設定できます。<\/DIV>";
Comments[6] = "<DIV CLASS='Style1'>他のサンプルもどうぞご覧下さい。<\/DIV>";

var lay = new Array();
var Lflag = false;

var TimeID;
function Init(){
	if(iIE4){
		for(i = 1; i <= Laymax; i++){
			lay[i] = document.all("iL"+i);
			lay[i].style.visibility = "hidden";
		}
	}
	if(iNN4){
		for(i = 1; i <= Laymax; i++){
			lay[i] = document.layers["iL""+i];
			lay[i].visibility = "hide";
		}
	}
	Lflag = true;
	SetComPos();
	Scroll();
}

var ComPosY = new Array();
function SetComPos(){
	for(i = 1; i <= Laymax; i++){
		ComPosY[i] = FadeStart + (i - 1)*PHeight + 20;
		CountFadeIn[i] = 99;
		CountFadeOut[i] = 99;
	}
}

var CountScr = 0;
var CountFadeIn = new Array();
var CountFadeOut = new Array();
var Com;
function Scroll(){
	if(Lflag){
		CountScr++;
		if(CountScr > 60000){
			clearTimeout(TimeID);
		}
		for(i = 1; i <= Laymax; i++){
			ComPosY[i] -= 1;
			if(iIE4){
				lay[i].style.top = ComPosY[i];
				lay[i].style.left = PLeft;
			}
			if(iNN4){
				lay[i].top = ComPosY[i];
				lay[i].left = PLeft;
			}
				if(ComPosY[i] == FadeStart){
				CountFadeIn[i] = 0;
				if(iIE4)lay[i].style.visibility="visible";
				if(iNN4)lay[i].visibility="show";
			}
			if(CountFadeIn[i] < 99)FadeIn(i);
				if(ComPosY[i] == FadeEnd){
				CountFadeOut[i] = 0;
			}
			if(CountFadeOut[i] < 99)FadeOut(i);
		}
	}
	TimeID = setTimeout("Scroll()",ScrSpeed);
}

var ColorPLTin = "fedcba9876543210";
var ColorPLTout = "0123456789abcdef";
function FadeIn(Com){
	if(CountFadeIn[Com] < ColorPLTin.length){
		z = ColorPLTin.charAt(CountFadeIn[Com]);
		ColorF = z+z+z+z+z+z;
		SetColor(Com,ColorF);
		CountFadeIn[Com]++;
	}else{
		CountFadeIn[Com] = 99;
	}
}

function FadeOut(Com){
	if(CountFadeOut[Com] < ColorPLTout.length){
		z = ColorPLTout.charAt(CountFadeOut[Com]);
		ColorF = z+z+z+z+z+z;
		SetColor(Com,ColorF);
		CountFadeOut[Com]++;
	}else{
		CountFadeOut[Com] = 99;
	}
}

function SetColor(Com,ColorF){
	if(iIE4){
		lay[Com].style.color = ColorF;
		lay[Com].innerHTML = Comments[Com];
		lay[Com].style.top = ComPosY[i];
		lay[Com].style.left = PLeft;
	}
	if(iNN4) {
		lay[Com].document.open();
		lay[Com].document.fgColor = ColorF;
		lay[Com].document.write(Comments[Com]);
		lay[Com].document.close();
	}
}
// -->
</SCRIPT>
■body部
<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>
<DIV CLASS="Style1" ID="iL5"></DIV>
<DIV CLASS="Style1" ID="iL6"></DIV>
→サンプル表示←
■ポップアップウインドウ
テキスト上をマウスが通過したとき、ポップアップウインドウを開くダイナミックHTMLです。
→サンプル表示←
■ポップアップウインドウ2
テキスト上をマウスが通過したとき、ポップアップウインドウを開くダイナミックHTMLです。
→サンプル表示←
■カスタムメニュー
■カスタムメニュー2
■メニュー(ツリー型)
WindowsのExplorer風のツリー形式menuのスクリプトです。
→サンプル表示←
■左右スクロール
テキストや画像を左右にスクロールさせるダイナミックHTMLです。
→サンプル表示←
■斜めスクロール
テキストや画像を斜めにスクロールさせるダイナミックHTMLです。
→サンプル表示←

 

SEO [PR] ����!�����u���O �����z�[���y�[�W�J�� �������C�u����