js打字机效果实现
Posted 不再犯错
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js打字机效果实现相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打字机效果</title>
</head>
<body>
<div id="HotNews">
</div>
<script type="text/javascript">
var NewsTime=2000;
var TextTime=50;
var newsi=0;
var txti=0;
var txttimer;
var newstimer;
var newstitle=new Array(); //微博标题
var newshref=new Array(); //微博链接
newstitle[0]="健康是身体的本钱";
newshref[0]="#";
newstitle[1]="关心身体，就是关心自己";
newshref[1]="#";
newstitle[2]="去西藏旅游了";
newshref[2]="#";
newstitle[3]="大雨倾盆，很大呀";
newshref[3]="#";
function shownew(){
var endstr="";
hwnewstr=newstitle[newsi];
newslink=newshref[newsi];
if(txti==(hwnewstr.length-1)){
endstr="";
}
if(txti>=hwnewstr.length){
clearInterval(txttimer);
clearInterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi=0;
}
newstimer=setInterval("shownew()",NewsTime);
txti=0;
return;
}
clearInterval(txttimer);
document.getElementById("HotNews").href=newslink;
document.getElementById("HotNews").innerHTML=hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer=setInterval("shownew()",TextTime);
}
shownew();
</script>
</body>
</html>
以上是关于js打字机效果实现的主要内容，如果未能解决你的问题，请参考以下文章