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
- js实现打字机效果---Day06
- js实现打字机效果
- JS实现打字机式字符输出效果
- js打字机效果
- JS打字机效果
- typed.js 打字机效果
- JS文字打字机效果
- JavaScript打字机效果实现
- jquery实现打字机效果
- UGUI实现打字机效果
- js+jQuery实现网页打字机效果(带光标)
- JS特效之打字机效果
- cocos2d-x实现打字机效果
- [练习1] js 学习之打字机效果
- 打字机效果
- java实现打字机效果的程序
- html+javascript实现文字的打字机效果
- html中javascript实现打字机效果
- Memcached wiki 二 安装
- [Cocos2d-x v3.x官方文档]事件分发机制
- Android应用开发--颜色拾取器,color picker
- SPOJ BYTESM2
- linux增加/根目录的磁盘空间(基于LVM)
- js实现打字机效果---Day06
- ASP.NET入驻Github 下一代ASP.NET将全部开源
- 自定义表格添加复选框列
- Linux网络编程 fork() 和 exec() 函数实例分析
- 钩子编程(HOOK) 安装进程内键盘钩子
- 买书问题——编程之美1.4
- ListView的性能优化之convertView和viewHolder
- 网络设备配置与管理(ing)
- note <practical c programming> chapter 5