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>

posted @   不再犯错  阅读(1187)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示