从事例中学习JavaScript,经过字符串和定时器完成对话作用

频道:推荐新闻 日期: 浏览:234

今日突发奇想,js能不能通过字符串和定时器来完结游戏中的对话作用呢。

试了一下,还真挺好玩的。

上作用图:

本节触及的知识点:

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

1. charAt办法

js的charAt办法是用来获取字符串中窝里秀的某一个字符的,它是归于string的一个办法。

比方:

var str = 'ABCDEFG';
var a = str.c孙乐弟harAt(6);//取下标为6的字符
alert(a);

Paste_Image.png

2. setInterval定时器

详细用法如下:

setInterval(function(){

},10泽州张军00);

第一个参数是一个回调函数,代表了你要做的工作。

第二个参数是延时的时刻,代表了每隔多长时刻就触发一次函数里边的内压裂子容。

留意:js是单线程的,它没有像JAVA言语那样的sleep办法。在js中任何的动画作用,基本上都要通过 setInterval 或许 setTimeout来完结。

3. 绘图

css:

* {margin:0;padding:0}从案例中学习JavaScript,通过字符串和定时器完结对话作用
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;
positi95105856on: 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:





作用图:

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

4. js完结打印机作用

咱们能够通过定时器来完结一个延时,比方现在我有一个字符串:

var str = "Hello World!"

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




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

v辛艾萨莉之心ar str = "Hello World!"
var text = doc小学生泳装迭戈恐龙岛探险u从案例中学习JavaScript,通过字符串和定时器完结对话作用ment.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.getElementsByClassNam新银众商e('从案例中学习JavaScript,通过字符串和定时器完结对话作用i壬月暮远nnerBox')[0];
var text = 'JavaScrip从案例中学习JavaScript,通过字符串和定时器完结对话作用t一种直译式脚本言语,是一种动态类型、弱类型、根据原型的言语,内置支撑类型。它的解说器被称为JavaScript引擎,为阅读从案例中学习JavaScript,通过字符串和定时器完结对话作用器的一部分,广泛用于客户端的脚本言语,最早是在从案例中学习JavaScript,通过字符串和定时器完结对话作用HTML(规范通用符号言语下的一个运用)网页上运用,用来给HTML网页添加动态功用。天空,你也要好好学习呀!';
var len = text.length;
vag1652r timer = null;
var index = 0;

timer = setInterval(function(){
if(indpmidex == len){
cl从案例中学习JavaScript,通过字符串和定时器完结对话作用earInterval(timer);
}
齐晓赫连擎innerBox.innerHTML += text.charAt(index++);
},50);
}

思路:

1.新建一个需求动画展现的文本曰黜吧

2.记载下当时遍历的字符方位

3.记载文本的总长度

4.新建一个定时器timer

5.50ms轮询,每次轮询都取文本的下一个字符,添加到innerBox。

6.当最终一个字符也遍历完了,持续进入轮询的时分,就铲除定时器。

作用(截图原因看起来有点卡顿,其实是十分流通的哦):

热门
最新
推荐
标签