こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

javascriptで文章を一文字ずつ表示する。

javascriptで文章を一文字ずつ表示する。


表示されている文章をクリックすると、その文章は非表示になり次の文章に切り替わります。
displayがnoneからblockになるときに一文字ずつ表示するにはどうすれば良いでしょうか?

<script type="text/javascript">
var cnt = 0;
function display(){
document.getElementById("s0"+cnt++).style.display = "none";
document.getElementById("s0"+cnt).style.display = "block";
}
</script>

<style>
a{display:none;}
#s00{display:block;}
</style>

<a id="s00" onclick="display();">00000</a>
<a id="s01" onclick="display();">11111</a>
<a id="s02" onclick="display();">22222</a>
<a id="s03" onclick="display();">33333</a>
<a id="s04" onclick="display();">44444</a>
  ・
  ・
<a id="s90" onclick="display();">00000</a>

投稿日時 - 2010-08-16 15:57:03

QNo.6113378

困ってます

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

なんか出来ちゃったので回答しますが、自信はあまりないです。
timer?がよくわからない。
ただ、1文字ずつ表示中にさらにクリックすると、
うまいこと次へ行ってくれます。

あとidの番号をキチンとした連番に変更しました。
なにか参考になる部分でもあればと思います。

<style type="text/css">
<!--
a{display:none;}
#s0{display:block;}
-->
</style>
<script type="text/javascript">
//@cc_on
window./*@if(@_jscript_version<=5.8)
attachEvent('on'+ @else @*/ addEventListener(/*@end @*/
'load',function(){
document.getElementById("box")./*@if(@_jscript_version<=5.8)
attachEvent('on'+ @else @*/ addEventListener(/*@end @*/
'click', function( evt ){
var t = evt. /*@if(@_jscript_version<=5.8) srcElement
@else @*/ target /*@end @*/;
if( t.nodeName == "A" && /^s\d$/.test(t.id) ){
if( t.timer )clearInterval( t.timer );

var num = parseInt( t.id.replace("s","") ) + 1;
var next = document.getElementById( "s" + num );
if( next ){
t.style.display = "none";
display( next );
}
}

}, false );
}, false );
function display( next ){
var str = next.firstChild.nodeValue;
var cnt = 0, len = str.length;
next.firstChild.nodeValue = str.substring( 0, ++cnt);
next.timer = setInterval( function(){
next.firstChild.nodeValue = str.substring( 0, cnt );
next.style.display = "inline";
if( cnt < len ){
cnt++;
}else{
clearInterval(next.timer);
}
},500);
}
</script>
</head>
<body>
<div id="box">
<a id="s0">00000</a>
<a id="s1">11111</a>
<a id="s2">22222</a>
<a id="s3">33333</a>
<a id="s4">44444</a>
<a id="s5">55555</a>
<a id="s6">66666</a>
<a id="s7">77777</a>
<a id="s8">88888</a>
<a id="s9">99999</a>
<a id="s10">1010101010</a>
</div>
</body>
</html>

投稿日時 - 2010-08-21 18:59:34

ANo.1

1文字ずつ表示ってこういうことでいいのでしょうか。

<script type="text/javascript">
var cnt = 0;
function display(){
document.getElementById("s0"+cnt++).style.display = "none";
//document.getElementById("s0"+cnt).style.display = "block";
//blockだと1行ずれて表示されてしまうため
document.getElementById("s0"+cnt).style.display = "inline";
displayOneCharacter();
}

function displayOneCharacter() {
 //元の文字列を退避
 var temp = document.getElementById("s0"+cnt).innerHTML;
 //文字列の長さ
 var len = temp.length;
 //表示する文字列のインデックス
 var endIndex = 0;
 //最初は1文字目だけ表示
 document.getElementById("s0"+(cnt)).innerHTML = temp.substr(0, ++endIndex);
 //一定時間ごとに1文字ずつ表示文字を追加していく
 var timeId =
  setInterval(
   function() {
    document.getElementById("s0"+cnt).innerHTML = temp.substring(0,++endIndex);
    if(endIndex === len) clearInterval(timeId);
   }
   ,1000 //1秒毎
  ); 
}
</script>

もっと素敵なやり方をどなたかが教えてくれるといいのですが・・

投稿日時 - 2010-08-16 17:46:59

あなたにオススメの質問