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

締切済

質問者：exansan
質問日時：2010/08/16 15:57
回答数：2件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： zeff#1
回答日時：2010/08/21 18:59

なんか出来ちゃったので回答しますが、自信はあまりないです。

timer？がよくわからない。
ただ、１文字ずつ表示中にさらにクリックすると、
うまいこと次へ行ってくれます。

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

<style type="text/css">

</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>