SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [タイプライター]

タイプライター

機能

手打ちのタイプライターのように、１文字ずつ順次表示していくスクリプトです。テキストを順番に表示していく効果で、見るものを注視させます。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iL1を指定します。

改造方法

タイプする速度とスタイル、テキストを変更可能です。

スタイル(Style1): CSSリファレンスに従って、変更可。
テキスト: Commentsに文字列として指定します。
タイプ速度: actTを小さくすれば速く、大きくすれば遅くなります。

対応ブラウザ

IE4,NN4以上(NN4.0xで全角文字を使用した際、文字化けする場合があります)

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>タイプライター</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	top:			50px;
	left:			50px;
	font-size:		36pt;
	font-weight:		bold;
	color:			#0000ff;
}
-->
</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 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>

</HEAD>

<BODY onload="Init()">

<DIV CLASS="Style1" ID="iL1"></DIV>

</BODY>
</HTML>

[Go To Top]