如何实现在网页上插入一个DIV实现逐字显示效果并且能换行-JavaSript-爱易网页

如何实现在网页上插入一个DIV实现逐字显示效果并且能换行

日期：2014-05-16　浏览次数：20525 次

怎么实现在网页上插入一个DIV实现逐字显示效果并且能换行
例如这段代码，不过不能实现分行显示，求大神改进

<html>
<head>
<title>逐字显示文字</title>
<script language="javascript">

</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 = "想在这个页

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何实现在网页上插入一个DIV实现逐字显示效果并且能换行

相关资料更多>

推荐阅读更多>