如何实现在网页上插入一个DIV实现逐字显示效果并且能换行
日期：2014-05-16 浏览次数：20494 次
怎么实现在网页上插入一个DIV实现逐字显示效果并且能换行
例如这段代码，不过不能实现分行显示，求大神改进
<html>
<head>
<title>逐字显示文字</title>
<script language="javascript">
<!--
text = "特顿发是树上是是";
i = 0;
function type(){
str = text.substr(0,i);
txt.innerHTML = str + "_";
i++;
if (i>text.length)i=0;
setTimeout("type()",300);
}
//-->
</script>
</head>
<body onLoad="type()">
<div id="txt"></div>
</body>
</html>
------解决方案--------------------
有点小问题前面的字数控制，改这样
------解决方案--------------------
例如这段代码，不过不能实现分行显示，求大神改进
<html>
<head>
<title>逐字显示文字</title>
<script language="javascript">
<!--
text = "特顿发是树上是是";
i = 0;
function type(){
str = text.substr(0,i);
txt.innerHTML = str + "_";
i++;
if (i>text.length)i=0;
setTimeout("type()",300);
}
//-->
</script>
</head>
<body onLoad="type()">
<div id="txt"></div>
</body>
</html>
------解决方案--------------------
有点小问题前面的字数控制，改这样
<html>
<head>
<title>javascript文字逐字逐行显示效果</title>
<script>
var text = "12345678901234567890123456789012345678901234567890";
var textLen = text.length;
var lineNum = 10; //定义每行显示多少个字
var num = 0;
var _ = document.createTextNode('_');
var i = 0;
function type() {
str = text.substr(i, 1);
var txt = document.getElementById('txt');
txt.appendChild(document.createTextNode(str));
txt.appendChild(_);
num++;
if (num > 0 && num % lineNum == 0) txt.appendChild(document.createElement('br'));
i++;
if (i < textLen) setTimeout(function () { type(i) }, 300); else txt.removeChild(_);
}
</script>
</head>
<body onload="type()">
<div id="txt"></div>
</body>
</html>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
#tcfr {
width: 200px;
height: 300px;
background: #99ccff;
font-size: 20px;
text-indent: 40px;
}
#tcfr p {
margin: 0px;
}
</style>
</head>
<body>
<div id="tcfr">
</div>
<script type="text/javascript">
var str = "想在这个页
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
