js实现打字机效果---Day06

来源:互联网 发布:床和床头柜尺寸 知乎 编辑:程序博客网 时间:2024/05/23 13:54

我常想象这样一幅画面:素雅的大背景,伴着可心的音乐,优雅旋转着的芭蕾舞者,旁边那不断打出的文字,仿佛就这样娓娓道来他们那美美的故事;也常想象:呼喇啦甩动的大旗下,一双双充满希冀的眼神,那不停诉说的,可是他们心中那无限的向往;也会想象:肃穆庄重的殿堂里,温文尔雅的男人,俏丽迷人的女人又为何喜极而泣,那悠悠闪现的,岂不就是他们那美好的希冀和幸福的甜蜜;也曾想象....

思路一开,总像潮水一样澎湃,怎奈这世间如此多的美丽,让人喜不胜收。我喜欢这样,勾勒一幅幅美丽的画面,看着就满满的都是幸福,我试着尝试在网页上把他实现,终于让我找到了,就是用打字机的效果。

那么究竟该怎样去做呢?接下来来实现一下(因为是动态的,就不截取画面了,看不出效果来)

首先:根据想要得到的效果,分析实现的原理

想要的效果就是一个个不断出现的文字:随着时间推移,将需要显现的文字慢慢呈现,而不是一下子全部显示,仅此而已。既然效果有了,我们改如何是实现呢?

将一段文字逐渐显示完全,就是说:先显示部分字符串,然后将之后的字符串不断拼接上;或者说先显示部分,随着时间不同,显示的部分越大。这样我们来简化一点说,就是将这个问题简化到了:字符串的操作;

其次:我们来简单的编写一下

在body中

<div id="myBody" class=".myBody" style="width:500px;min-height:300px;background-color:cyan;"></div>
-----------只是为了显示文字

在js中的实现,这里是重点,也是关键点

<script>var msg="测试用的语言";function showMsg(postion,msg,time){var count=0;var timer=null;timer=setInterval(function(){if(count>msg.length){clearInterval(timer);}else{postion.innerHTML=msg.substring(0,count);count++}},time)}window.onload=function(){var myBody=document.getElementById("myBody");showMsg(myBody,msg,30);}</script>
基本原理即是:定时器+字符创的不同截取

说到这里你会了么,打开你最美的想象力,让我们共同的来感受这个世界的美好吧...



0 0