前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《从案例中学习JavaScript》之实现对话效果

《从案例中学习JavaScript》之实现对话效果

作者头像
剽悍一小兔
发布2018-05-17 14:19:57
1K0
发布2018-05-17 14:19:57
举报
文章被收录于专栏:web编程技术分享

今天突发奇想,js能不能通过字符串和定时器来实现游戏中的对话效果呢。试了一下,还真挺好玩的。

上效果图:

Paste_Image.png

本节涉及的知识点:

  • 字符串的charAt方法
  • js定时器setInterval(轮询)

1. charAt方法

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

比如:

代码语言:javascript
复制
var str = 'ABCDEFG';
var a = str.charAt(6);//取下标为6的字符
alert(a);

Paste_Image.png

2. setInterval定时器

具体用法如下:

代码语言:javascript
复制
setInterval(function(){
        
},1000);

第一个参数是一个回调函数,代表了你要做的事情。 第二个参数是延时的时间,代表了每隔多长时间就触发一次函数里边的内容。

注意:js是单线程的,它没有像JAVA语言那样的sleep方法。在js中任何的动画效果,基本上都要通过 setInterval 或者 setTimeout来实现。

3. 绘图

css:

代码语言:javascript
复制
* {margin:0;padding:0}
body {
    background: url(bg.jpg) 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(1.png) 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:

代码语言:javascript
复制
<div class='dialog'>
    <span class='pic'></span>
    <div class='innerBox'></div>
</div>

效果图:

Paste_Image.png

图片素材我是随便去网上截取的。

4. js实现打印机效果

我们可以通过定时器来实现一个延时,比如现在我有一个字符串:

代码语言:javascript
复制
var str = "Hello World!"

在body区域,我有一个div用来输出文字。

代码语言:javascript
复制
<body>
    <div id='text'></div>
</body>

如果你用for循环,虽然能依次打印,但这样是看不到动画效果的。

代码语言:javascript
复制
var str = "Hello World!"
var text = document.getElementById('text');

for(var i = 0; i < str.length; i++){
    text.innerHTML += str.charAt(i);
}

在不知道setInterval之前,我曾经天真的以为,可以使用单片机中C语言的软件延时方法,也就是在for循环里面增加一个无意义的循环操作来消磨cpu的时间,以达到延时的目的。

后来我发现在js中根本不是那么回事,其实,js的for循环是一口气执行好了,再展示给你的。

所以,如果你想通过for循环来达到延时的目的应该是不可能的。

好在js给我们提供了一个setInterval的轮询方法,我们可以通过这个方法来达到文字的动画效果。

代码如下:

代码语言:javascript
复制
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(timer);
        }
        innerBox.innerHTML += text.charAt(index++);
    },50);

}

思路: 1.新建一个需要动画展示的文本 2.记录下当前遍历的字符位置 3.记录文本的总长度 4.新建一个定时器timer 5.50ms轮询,每次轮询都取文本的下一个字符,添加到innerBox。 6.当最后一个字符也遍历完了,继续进入轮询的时候,就清除定时器。

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

1.gif

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.08.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. charAt方法
  • 2. setInterval定时器
  • 3. 绘图
  • 4. js实现打印机效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档