(新手求助)怎么让文字竖着显示


<html> 
<script>
var tid =null;
var n=0;
window.onload=function() 
{
  tid=setInterval("show()",500);
}
function show(){
var sc = document.getElementById("txt").value;
var chr = sc.charAt(n);
while(chr=='\r'){n++;chr = sc.charAt(n);}
if(chr=='\n') chr = "\n<br>";
document.getElementById("pad").innerHTML += chr;
n++;
if(n==document.getElementById("txt").value.length-1) clearInterval(tid);
}
</script><body>
<div id="pad" style="text-align:left;writing-mode: tb-rl;"></div>
<textarea id="txt" style="display:none;">
找天堂 
我在天堂向你俯身凝望  
就像你凝望我一样  
略带忧伤  
我在九泉向你抬头仰望  
就像你站在旷野之上  
仰望你曾圣洁的理想  总有一天  
我会回来  
带着满身的木棉与紫荆的清香  
带回我们闪闪亮亮的时光  
然后告诉你
我已找到天堂
</textarea>
</body> 
</html>

解决方案 »

  1.   

    <html> 
    <style type="text/css">
    .par{
    width:25px;
    margin-left:8px;
    float:left;
    color:#000000;
    border:1px solid #DC7456;
    height:300px;
    text-align:center;
    }
    </style>
    <script></script>
    <body>
    <div class="par">找天堂</div>
    <div class="par">我在天堂向你俯身凝望</div>
    <div class="par">就像你凝望我一样 </div>
    <div class="par">略带忧伤 </div>
    <div class="par">我在九泉向你抬头仰望 </div>
    <div class="par">就像你站在旷野之上 </div>
    <div class="par">仰望你曾圣洁的理想 </div>
    <div class="par">&nbsp;</div>
    <div class="par">总有一天 </div>
    <div class="par">我会回来 </div>
    <div class="par">带着满身的木棉与紫荆的清香 </div>
    <div class="par">带回我们闪闪亮亮的时光 </div>
    <div class="par">然后告诉你 </div>
    <div class="par">我已找到天堂 </div>
    </body> 
    </html>
      

  2.   


    <html>
    <style>
    .aa{text-align:left;writing-mode:tb-rl;display:inline;width:30px;height:300px;FILTER:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);}
    </style>
    <script>
    var tid =null;
    var n=0;
    var opt = 0;
    var arr;
    var div = null;
    window.onload=function() 
    {
      var sc = document.getElementById("txt").value;
      arr = sc.split("\r\n");
      for(var i=0;i<arr.length;i++){
        div = document.createElement("div");
     div.className = "aa";
     var obj = document.getElementById("pad");
     obj.appendChild(div);
      }
      div = null;
      tid=setInterval("show()",100);
    }
    function show(){
    if(div==null){
    div = document.getElementById("pad").childNodes[arr.length-n-1];
        div.innerHTML = arr[n]+"<br>";
    }
    opt+=10;
    div.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opt;
    if(div.filters.item("DXImageTransform.Microsoft.Alpha").Opacity>=100){
      opt = 0;
      div = null;
          n++;
      if(n==arr.length) clearInterval(tid);
    }
    }
    </script><body>
    <div id="pad"></div>
    <textarea id="txt" style="display:none;">
    找天堂 
    我在天堂向你俯身凝望  
    就像你凝望我一样  
    略带忧伤  
    我在九泉向你抬头仰望  
    就像你站在旷野之上  
    仰望你曾圣洁的理想  总有一天  
    我会回来  
    带着满身的木棉与紫荆的清香  
    带回我们闪闪亮亮的时光  
    然后告诉你
    我已找到天堂
    </textarea>
    </body> 
    </html>
      

  3.   

    不会做渐变效果，只能做到一条条显示
    <html> 
    <style type="text/css">
    .par{
    width:25px;
    margin-left:8px;
    float:left;
    color:#000000;
    border:1px solid #DC7456;
    height:300px;
    text-align:center;
    display:none;
    }
    </style>
    <script type="text/javascript">
    function $(strId){
    return document.getElementById(strId);
    }var nParCount;
    var nShowCount;
    var nInterval=500;
    function showArticle(){
    var oDiv=$("div_aritcle");
    nParCount=oDiv.getElementsByTagName("div").length;
    nShowCount=0;
    window.setTimeout("showPart()",nInterval);
    }
    function showPart(){
    var oDiv=$("div_aritcle").getElementsByTagName("div")[nShowCount++];
    oDiv.style.display="block";
    if(nShowCount<nParCount){
    window.setTimeout("showPart()",nInterval);
    }
    }window.onload=function(){
    showArticle();
    }
    </script>
    <body>
    <div id="div_aritcle">
    <div class="par">找天堂</div>
    <div class="par">我在天堂向你俯身凝望</div>
    <div class="par">就像你凝望我一样 </div>
    <div class="par">略带忧伤 </div>
    <div class="par">我在九泉向你抬头仰望 </div>
    <div class="par">就像你站在旷野之上 </div>
    <div class="par">仰望你曾圣洁的理想 </div>
    <div class="par">&nbsp;</div>
    <div class="par">总有一天 </div>
    <div class="par">我会回来 </div>
    <div class="par">带着满身的木棉与紫荆的清香 </div>
    <div class="par">带回我们闪闪亮亮的时光 </div>
    <div class="par">然后告诉你 </div>
    <div class="par">我已找到天堂 </div>
    </div>
    </body> 
    </html>