您的位置：首页 > Web前端 > JavaScript

html中javascript实现打字机效果

2016-07-27 14:21 399 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航