先把代码摆上了吧:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
js实现文字逐渐显示
</title>
<script type="text/javascript">
var paper = "真的学渣 | 敢于面对惨淡的成绩 | 敢于正视辅导员的双眸 . . .";
var count = 1;
function oneByOne()
{
var screen = paper.substr(0, count);
loopText.innerHTML = screen;
count++;
if (count > paper.length)
return;
setTimeout(oneByOne, 250);
}
onload = oneByOne;
</script>
<style type="text/css">
#test {
position:absolute;
right:15em;
top:1em;
width:1px;
color:#ff0000;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="test">
<p id="loopText"></p>
</div>
</body>
</html>
如果你也像我样是菜鸟, 那我就啰嗦几句.
上面处于无聊,加了一些css, 与功能无关.
文字逐个显示是通过oneByOne函数的递归调用实现的, 每250毫秒更新一次. 每更行一次多加一个字.
若想显示完再次重头开始的话, 可以将js代码if内的语句由return改为 count=0;
最后请注意13行的用法,直接使用id来改变值, 很实用的语法, 比jquery都简便, 我也是才知道.