html中javascript实现打字机效果

来源：互联网发布：iphone软件怎么做编辑：程序博客网时间：2024/05/11 08:54

最简洁的javascript实现，不用任何插件，更便于新手学习实现原理。

话不多说，直接上代码。也可以直接到这里下载http://download.csdn.net/detail/home_498/9587553

<html><head><style>.saying:after {  content: "|";  font-family: Arial, sans-serif;  font-size: 1.2em;  line-height: 0;  display: inline-block;  vertical-align: baseline;  opacity: 1;  animation: caret 500ms infinite;}</style><script language="javascript">var index=0;var word;function type(){    var typePanel = document.getElementById("aa");    typePanel.innerText = word.substring(0,index++);    if(index % 3 == 0){        typePanel.className = "";    }else if(index % 3 == 1){        typePanel.className = "saying";    }}window.onload=function(){    word=document.getElementById("w").innerHTML;    setInterval(type, 200);}</script></head><body><pre id="aa" class="saying"></pre><div style="display:none" id="w">谈及航母的改建工程，当时为了解决现场建设困难，他们做了大量的工作：一是统筹好所有的工作项目，精确安排每人每天的任务，最忙的时候精确到每个小时的具体任务；二是提高所有的施工质量，通过保证质量，在更大程度上节约时间；三是加班加点。“通过这三个方面的手段，才把时间给抢回来。”王治国回忆，“因为我们在北方，那一年遇上了五十年不遇的严寒。前面的很多土建工作，受温度影响很大，耽误了时间。为了抢进度，最后我们把时间抢回来了。”</div></body>

1 0