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

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

上作用图:

本节触及的知识点:

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

1. charAt办法

js的charAt办法是用来获取字符串中的某一个字符的,它是归于strin黄动漫g的一个办法。

比方:

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;paddinselina妹妹g:0}
body {
background从案例中学习JavaScript,通过字符串和定时器完结对话作用: url(bg.jpg) no-repeat;
background-size: 100%;
}
.di圣樱蒂贵族学院alog {
width:100%;
height:100px;
background:rgba(136,180,251,0.5);
position:absolute;
bottom: 0;

}
.dialog .pic {
width:6从案例中学习JavaScript,通过字符串和定时器完结对话作用0px;
height:60王炎念什么字px;
backfow007groun从案例中学习JavaScript,通过字符串和定时器完结对话作用d: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;
pad从案例中学习JavaScript,通过字符串和定时器完结对话作用ding:2px;
}

html:





作用图:

图片淮安市第一人民医院素朱京红材我是随便去网上截取的。

4. js完结打印机作用

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

var str = "H明若晴风ello World!"

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




假如你用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的时刻,以到达延时的意图。

后从案例中学习JavaScript,通过字符串和定时器完结对话作用来我发现在js中底子不是那么回事,其实,js的for循环是一口气履行好了,再展现许楚强公棚给你的。

所以,假如你想通过for隋雁云循环来到达延时的意图应该是不可能的。

好在js给咱们供给了一个setInterval的轮询办法,咱们能够通过这个办法来到达文字的动画作用。

代码如下:

window.onload = function(){
var innerBox = document.getE深圳上嵌集团lementsca1924ByClassName('innerBox')[0];
var text = 'JavaScript一种直译式脚本言语,是一种动态类型、弱类型、根据原型从案例中学习JavaScript,通过字符串和定时器完结对话作用的言语,内置支撑类型。它的解说器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本从案例中学习JavaScript,通过字符串和定时器完结对话作用言语,最早是在HTML(规范通用符号言语下的一个运用)网页上运用,用来给HTML网页添加动态功用。天空田震环,你也要好好学习呀!';
var len = text.length;
var timer = null;
var index = 0;

timer = setInterval(f林平和为什么看上李念unction(){
if(index == len){
clearInterval(timer);
}
innerBox.innerHTML += text.charAt(indtoptoonex++);
},50);
}

思路:

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

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

3.记载文本的总长度

4.新建一个定时器timer

5.50ms轮询,每次轮询都取文本的下一个字符,添加到inn赵玉明单弦erBox。

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

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