- 締切済み
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>
- exansan
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- zeff
- ベストアンサー率69% (137/198)
なんか出来ちゃったので回答しますが、自信はあまりないです。 timer？がよくわからない。 ただ、１文字ずつ表示中にさらにクリックすると、 うまいこと次へ行ってくれます。 あと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>
- yamada_g
- ベストアンサー率68% (258/374)
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> もっと素敵なやり方をどなたかが教えてくれるといいのですが・・
