之实现对话效果

今日突发奇想,js能还是不可能透过字符串和沙漏来促成休闲游中的对话效果啊。试了一下,还真挺风趣的。

讲真的作者有一点点吃惊,用js写的对话效果在当天都就被多少个专项论题收音和录音,并且一贯被推荐到首页。作者怎么也未曾想到随意写的叁个小例子会这么受关怀,莫非是因为贴图的关联?

上效果与利益图:

4f98a0a1cd11728b50834c3ecbfcc3cec2fd2c9c.jpg

图片 1Paste_Image.png

嘛,不在意那些小细节了。

本节关系的知识点:

既然,我们就把那个对话效果做得全面一些吗。上一节《从案例中学习JavaScript》之完成对话效果
中,大家第一通过 setInterval
方法做了叁个轮询,进而实现了字符串的卡通打字与印刷效果。然而,还远远不足完善,比如,一旦字符长度超过了div的境界,文字就能溢出。当然,你能够给div加上三个overflow:hidden 的体制,然则那样的话,就不恐怕完全地显示出对话了。

  • 字符串的charAt方法
  • js定时器setInterval

大家开始渐渐化解那些标题,最后落到实处的作用就是,文字填满对话框的时候,自动停住,需求客商手动去点击一下,然后开展下一段对话。

1. charAt方法

js的charAt方法是用来猎取字符串中的某一个字符的,它是属于string的一个措施。

比如:

var str = 'ABCDEFG';var a = str.charAt;//取下标为6的字符alert;

图片 2Paste_Image.png

本章首要讲函数的卷入。

2. setInterval定时器

切切实实用法如下:

setInterval(function(){ },1000);

首先个参数是三个回调函数,代表了您要做的事务。第二个参数是延时的时日,代表了每隔多久就接触一回函数里边的故事情节。

只顾:js是单线程的,它未有像JAVA语言那样的sleep方法。在js中另外的卡通效果,基本上都要经过
setInterval 或然 setTimeout来贯彻。

本节提到的知识点:

3. 绘图

css:

* {margin:0;padding:0}body { background: url no-repeat; background-size: 100%;}.dialog { width:100%; height:100px; background:rgba(136,180,251,0.5); position:absolute; bottom: 0; }.dialog .pic { width:60px; height:60px; background:url no-repeat; background-size: 100%; display:inline-block; position: absolute; top:16px; left:16px; border-radius: 5px;}.dialog .innerBox{ width:90%; height:80px; border:2px solid #dcc0a5; opacity: 0.8; left:85px; top:10px; position: absolute; border-radius: 5px; font-size: 20px; font-family: 微软雅黑; color:#fff; text-shadow: 1px -1px 1px #333; word-wrap:break-word; padding:2px;}

html:

<div class='dialog'>  <div class='innerBox'></div></div>

效果图:

图片 3Paste_Image.png

图片素材笔者是随意去英特网截取的。

  • 函数的包裹才具

4. js落到实处打字与印刷机效果

咱们得以经过计时器来落到实处一个延时,比方未来自个儿有贰个字符串:

var str = "Hello World!"

在body区域,小编有二个div用来输出文字。

<body> <div id='text'></div></body>

假设你用for循环,即使能挨个打印,但这么是看不到动画效果的。

var str = "Hello World!"var text = document.getElementById;for(var i = 0; i < str.length; i++){ text.innerHTML += str.charAt;}

在不清楚setInterval在此以前,笔者曾经天真的感觉,能够选拔单片机中C语言的软件延时方法,也正是在for循环里头扩展一个架空的循环操作来打发cpu的光阴,以高达延时的目标。

新兴自个儿开采在js中一直不是那么回事,其实,js的for循环是一口气推行好了,再呈现给你的。

故此,要是您想通过for循环来达到延时的指标应该是不容许的。

万幸js给大家提供了一个setInterval的轮询方法,大家能够经过那一个措施来完成文字的卡通效果。

代码如下:

window.onload = function(){ var innerBox = document.getElementsByClassName('innerBox')[0]; var text = 'JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。天空,你也要好好学习呀!'; var len = text.length; var timer = null; var index = 0; timer = setInterval(function(){ if(index == len){ clearInterval; } innerBox.innerHTML += text.charAt; },50);}

思路:1.新建贰个亟待动画呈现的文书2.记下下当前遍历的字符地点3.记录文本的总省长度4.新建三个定时器timer5.50ms轮询,每第1轮询都取文本的下贰个字符,增加到innerBox。6.当最终四个字符也遍历完了,继续步向轮询的时候,就解除电火花计时器。

成效(截图原因看起来有一点点卡顿,其实是非常流畅的啊):

图片 41.gif

本章甘休 …

乐善好施一小兔,电气自动化毕业。加入工作后对Computer感兴趣,深知初学编制程序之劳苦。希望将和煦所学记录下来,给初学者一点赞助。

豁免权利评释
博客中持有的图片素材均来源于百度寻觅,仅供就学交换,如极度请联系小编,侵立删,多谢。

下节关系的知识点:

  • div元素的 scrollHeight 和 clientHeight
  • 按钮变量的利用技巧

发表评论

电子邮件地址不会被公开。 必填项已用*标注