专栏首页web编程技术分享《从案例中学习JavaScript》之实现对话效果

《从案例中学习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 条评论
登录 后参与评论

相关文章

  • 《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧

    剽悍一小兔
  • 《从案例中学习JavaScript》之实现对话效果(3)

    剽悍一小兔
  • js正则表达式简单应用

    剽悍一小兔
  • CSS实现8种炫酷按钮

    在各种UI组件库大行其道的今天,大家已经很少自己用CSS去实现一些效果了,久而久之CSS的水平也越来越退步,所以有空还是得练练。今天给大家分享8种炫酷按钮的CS...

    MudOnTire
  • 爱奇艺:盈利就在眼前?

    一直以来,作为承载用户观看需求的载体,各大视频平台前赴后继,在占领用户时间上绞尽脑汁。然而各平台之间的竞争也并没有因为赛道格局成型而逐渐消散,反而有愈演愈烈之势...

    刘旷
  • 独家 | 手把手教你如何使用Flask轻松部署机器学习模型(附代码&链接)

    当数据科学或者机器学习工程师使用Scikit-learn、Tensorflow、Keras 、PyTorch等框架部署机器学习模型时,最终的目的都是使其投入生产...

    数据派THU
  • PHP7.4新特性

    PHP7.4版本已经正式发布了,做为PHP7版本的最后一次大更新,这一次又为我们带来了什么新特性呢?

    硬核项目经理
  • 原生JS获取input上传的图片返回的地址

    越陌度阡
  • 模仿一个在线表格

    展示地址:https://gethtml.cn/project/2020/04/19/index.html

    Dreamy.TZK
  • 详解Python中的位运算符规则、原理与用法

    在Python中,位运算符包括位与(&)、位或(|)、位求反(~)、位异或(^)、左移位(<<)和右移位(>>)。 1. 运算方法与规则 位运算符只能适用于整数...

    Python小屋屋主

扫码关注云+社区

领取腾讯云代金券