Java Scriptのお勉強 かたかた文字を書く

setIntervalを使って、文字が一文字ずつ、かたかた書かれていくのをやってみました。

サンプル1のコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript">
<!--
msg="Java Scriptのお勉強、始めてみました。うひひ。どこまで続くか、お楽しみ…。かたかた今日も、コードを書いてます。おぉぅと、スペルを間違えた。ひとつつづりを間違えると、Java Scriptは動かない…。うへー、たいへんだなぁ。";
nub=1;
function topmsg(){
if(nub<=msg.length){
document.form1.text1.value=msg.substring(0,nub);
nub=nub+1;
}
}
// -->
</script>
<title>テキストエリアに文字を書く1</title>
<style type="text/css">
p{
width:40em;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body onload="setInterval('topmsg()',200)">
<form name="form1"><p><textarea cols="40", rows="5" name="text1"></textarea></p></form>
</body>
</html>

▼サンプル1

ページが読み込まれると、一文字ずつ書く文字数を増やしながら、書き込んでいくという動作を繰り返すsetIntervalを使ってます。


サンプル2のコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript">
<!--
msg="Java Scriptのお勉強、始めてみました。うひひ。どこまで続くか、お楽しみ…。かたかた今日も、コードを書いてます。おぉぅと、スペルを間違えた。ひとつつづりを間違えると、Java Scriptは動かない…。うへー、たいへんだなぁ。";
nub=1;
function topmsg(){
if(nub<=msg.length){
document.form1.text1.value=msg.substring(0,nub);
nub=nub+1;
}
}
// -->
</script>
<title>テキストエリアに文字を書く2</title>
<style type="text/css">
p{
width:40em;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
<form name="form1"><p><textarea cols="40", rows="5" name="text1"></textarea></p>
<p><input type="button" value="押してちょ!" name="push" onclick="setInterval('topmsg()',200)" /></p>
</form>
</body>
</html>

▼サンプル2

サンプル1とほぼ同じですが、ボタンを押すのがトリガーになります。


サンプル3のコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript">
<!--
msg="Java Scriptのお勉強、始めてみました。うひひ。どこまで続くか、お楽しみ…。かたかた今日も、コードを書いてます。おぉぅと、スペルを間違えた。ひとつつづりを間違えると、Java Scriptは動かない…。うへー、たいへんだなぁ。";
nub=1;
function topmsg(){
if(nub<=msg.length){
document.form1.text1.value=msg.substring(0,nub);
nub=nub+2;
}
}
// -->
</script>
<title>テキストエリアに文字を書く3</title>
<style type="text/css">
p{
width:40em;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body onload="setInterval('topmsg()',200)">
<form name="form1"><p><textarea cols="40", rows="5" name="text1"></textarea></p></form>
</body>
</html>

▼サンプル3

サンプル1とほぼ同じですが、2文字単位で表示されていきます。ただ、2文字ずつ増えていって、文字全体数を超えると、ifの条件で超えてしまったときに、intervalがとまってしまうので、文字数によっては(奇数・偶数とか、倍数とかで)最後の1文字が表示されないってことが起きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/30/java-script-set-interval01.html/trackback