html中javascript实现打字机效果

最新推荐文章于 2026-05-08 13:58:39 发布

原创最新推荐文章于 2026-05-08 13:58:39 发布 · 9.5k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用纯JavaScript在HTML中实现打字机效果，适合初学者学习。示例代码可在CSDN下载。

最简洁的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>