js打字机效果实现

时间:2023-03-09 03:48:45
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>