首页 > 分享 > js实现打字机(一个一个字出现)

js实现打字机(一个一个字出现)

最新推荐文章于 2024-09-12 23:23:34 发布

JK Chen 于 2019-06-09 19:54:18 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。

链接: https://github.com/JkChenAcmer/Theme-pub.git

效果图:
在这里插入图片描述

js函数:

var para=new Array(8); para[0]=new Array(6); para[0][0]="....."; para[0][1]="....."; para[0][2]="....."; para[0][3]="....."; para[0][4]="....."; para[0][5]="....."; var timer; var t2; function load(id){clearInterval(timer);/* 重置 */clearInterval(t2);var sr="url('img/?.jpg')";var num=String(id);sr=sr.replace('?',num);var img=document.getElementById("pic");img.style.backgroundImage=sr;var ps=document.getElementsByTagName("p"),i;for(i=0;i<ps.length;i++){ps[i].innerHTML="";}var i=0,j=0; //第i段第j个字timer=setInterval(function(){j++;ps[i].innerHTML=para[id][i].substr(0,j);if(j>=para[id][i].length){j=0,i++;}if(i>=para[id].length){clearInterval(timer);}},10); }

1234567891011121314151617181920212223242526272829303132333435363738

html:

<div class="back" id="pic"><p class="text"></p><p class="text"></p><p class="text"></p><p class="text"></p><p class="text"></p><p class="text"></p><p class="text"></p><p class="text"></p> </div> 12345678910

相关知识

纯JS实现的鲜花,惊艳到了我。
js水仙花数原理
利用JS代码实现HTML网页飘落樱花特效(附代码)
js学习总结
js花怎么强化
js中的0.1+0.2!==0.3
元旦倒计时(JS计时器)
使用html+css实现一个静态页面
制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现8个页面
工业革命的28项发明:塑造我们的世界

网址: js实现打字机(一个一个字出现) https://m.huajiangbk.com/newsview702181.html

所属分类:花卉
上一篇: DES加密/解密的应用
下一篇: 厦门:洋紫荆花冬日绽放 满城繁花