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

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

上效果图:

Paste_Image.png

本节涉及的知识点:

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

1. charAt方法

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

比如:

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

Paste_Image.png

2. setInterval定时器

具体用法如下:

setInterval(function(){
        
},1000);

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

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

3. 绘图

css:

* {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:

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

效果图:

Paste_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('text');

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

在不知道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(timer);
        }
        innerBox.innerHTML += text.charAt(index++);
    },50);

}

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

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

1.gif

本章结束 ...

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

CSS Selectors Level 4新特性全面解析

前言 当看到 CSS Selectors Level 4 很多人会理所当然地喊出 CSS4。但是,这里必须明确一个概念,目前所谓的 CSS3 和 CSS4 都是...

32470
来自专栏偏前端工程师的驿站

CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display...

22180
来自专栏哲学驱动设计

OEA 中 WPF 树型表格虚拟化设计方案

    最近用 OEA 做的仓库管理系统中,许多界面的都需要使用表格控件来显示数据。一是这些表格的列非常多,有的甚至达到了 200 列,而且一个模块的界面中可能...

21670
来自专栏web编程技术分享

js学习: 自定义类库 - miniQuery 2.0

38870
来自专栏我的博客

Jquery学习第一天

1、jQuery优点 轻量级,强大的选择器,出色的DOM操作,可靠的事件处理,完善的Ajax,不污染的顶级变量,出色的浏览器兼容,链式操作,隐式迭代,行为层和结...

37780
来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

30370
来自专栏HTML5学堂

段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大...

42150
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

30090
来自专栏编程

第1章:初识编程

写在前面 之前答应过不少朋友今年要写个《猫哥极简编程入门》的系列,帮助各位对编程感兴趣的新人和非程序员,快速掌握一些实用的编程技巧,以便快速入门编程以及应付一些...

230100
来自专栏deepcc

.clearfix:after的用法,清除浮动

28160

扫码关注云+社区

领取腾讯云代金券