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

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

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

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

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

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

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

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

在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>

基本原理即是：定时器+字符创的不同截取

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