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

剽悍一小兔

发布于 2018-05-17 14:32:01

1K0

发布于 2018-05-17 14:32:01

文章被收录于专栏：web编程技术分享web编程技术分享

上一节传送门：《从案例中学习JavaScript》之实现对话效果（2）-- 附超简单函数封装技巧

本节涉及的知识点：

div元素的 scrollHeight 和 clientHeight
开关变量的使用技巧

先声明一下，这个案例是我临时想出来的，当时觉得挺好玩的，所以开始做。算是一次尝试吧，这不是讲解真正的游戏开发，虽然H5是可以做游戏开发的，不过我还没有去深入研究过。更何况这个案例比较基础，还没有用h5。

本案例的目的还是借由一个例子来讲解JavaScript的知识点，没别的意思。

继续上一节的内容，本节实现效果：文字填满对话框的时候，自动停住，需要用户手动去点击一下，然后进行下一段对话。

上一节的代码中，我们将实现逻辑封装成一个方法

var gameDialog = function(id,text,speed){
    var innerBox = document.getElementById(id);
    var text = text;
    var len = text.length;
    var timer = null;
    var index = 0;
    
    timer = setInterval(function(){
        if(index == len){
            clearInterval(timer);
        }
        innerBox.innerHTML += text.charAt(index++);
    },speed);
}

函数的封装极大地实现了代码的复用，调用方法后，就可以执行我们的动画效果了。但是，上一节中遗留了一个问题，比如我们传入了过多的文字，就会出现这样的情况：

gameDialog('content',
    " 简书客户端中包含杂文时政、小说诗歌、电影评论、科技新闻，无论你的兴趣如何构成，总能在这里找到志趣相投的作者与内容。"+
    " 简书始终致力于做中文世界最好的写作与阅读平台，集结最优秀的创作者与文字爱好者，在嘈杂喧嚣的网络时代，重新沉淀并唤醒文字的力量。" +
    " 简书客户端中包含杂文时政、小说诗歌、电影评论、科技新闻，无论你的兴趣如何构成，总能在这里找到志趣相投的作者与内容。"+
    " 简书始终致力于做中文世界最好的写作与阅读平台，集结最优秀的创作者与文字爱好者，在嘈杂喧嚣的网络时代，重新沉淀并唤醒文字的力量。" 
,38);

我们输入了这么长一段字符，原本的div肯定是装不下的，但是因为我们给content部分的css样式中添加了overflow ： hidden,所以溢出的文字没有显示出来，但实际上它已经溢出了。

如图：

Paste_Image.png

在rpg游戏中，一般都是对话框被占满后就停在那里了，然后需要玩家进行某些操作，比如按一个空格键，或者鼠标点击一下，就清空掉当前的对话框，打印接下来的文字。

那么，如何判断文字是否溢出了呢？这正是我们下一步要做的。

1. 判断文字是否溢出

我们先把 overflow ： hidden 这个属性给去掉，看一下是什么效果。

Paste_Image.png

可见，多出来的文字被挤下来了！

我们可以通过dom元素的scrollHeight属性来获取当前盒子的完整高度（包括溢出部分），于是在轮询中动态打印出文字区域的scrollHeight。

代码：

timer = setInterval(function(){
    console.log(innerBox.scrollHeight);
    if(index == len){
        clearInterval(timer);
    }
    innerBox.innerHTML += text.charAt(index++);
},speed);

Paste_Image.png

如图，每溢出一行，scrollHeight就增加25px，也就是我们设定的行高。

回顾css文件：

.dialog .innerBox #content {
    /*background: #E10482;*/
    margin:2px 10px 10px 10px;
    width:95%;
    height:99%;
    line-height:25px;
    /*overflow: hidden;*/
    font-size: 20px;
    text-align：justify;
}

行高正好是25px。你可能会问，为什么第一次是从79到100，是21px而不是25px呢？

我们将图放大：

Paste_Image.png

content盒子的可见高度未必是文字行高的整数倍，这也就导致了第一次溢出是会有偏差的，如图，第一次溢出部分的行高并没有完全脱离content盒子，对不对?

这样好理解了吧。

继续。

我们已经可以动态获取div盒子的完整高度了，那么是不是也可以获取可视区域的高度呢？

当然可以啦，clientHeight就可以办到！

console.log('文字可视区域的高度为：' + innerBox.clientHeight);

Paste_Image.png

对了，刚才我们看到的79px正是该区域文字部分的可见高度。

那么显而易见的，如何判断文字是否溢出呢？

对，就是将两个宽度进行比较，一旦发现scrollHeight超过了clientHeight，我们就认为文字溢出了。

上代码：

timer = setInterval(function(){
    console.log(box.scrollHeight + '=========' + box.clientHeight);
    if(box.scrollHeight > box.clientHeight){
        console.log('文字溢出啦！');
        clearInterval(timer);//清除定时器
                return; //返回
    }
    if(index == len){
        clearInterval(timer);
    }
    box.innerHTML += text.charAt(index++);
},speed);

（为了避免和html中的innerBox混淆，我们将gameDialog方法里面的innerBox改为box。）

Paste_Image.png

OK，我们再把溢出隐藏的属性加上：

.dialog .innerBox #content {
    margin:2px 10px 10px 10px;
    width:95%;
    height:99%;
    line-height:25px;
    overflow: hidden;
    font-size: 20px;
    text-align：justify;
}

2. 怎么少了一个字？

然后，我们将轮询的代码封装起来，作为一个start函数存在，同时，给文字区域添加一个点击事件来触发下一段文字，代码就成了这样：

var gameDialog = function(id,text,speed){
    var box = document.getElementById(id);
    var text = text;
    var len = text.length;
    var timer = null;
    var index = 0;
    
    function start(){
        box.innerHTML = '';
        timer = setInterval(function(){
            if(box.scrollHeight > box.clientHeight){
                clearInterval(timer);
                return;
            }
            if(index == len){
                clearInterval(timer);
            }
            box.innerHTML += text.charAt(index++);
        },speed);
}
    
start();

box.onclick = function(){
    start();
}

细心的你也许已经发现了，这个代码是有问题的。

看图，第一段文字的末尾是这样：

Paste_Image.png

而第二段文字的开头却是这样的：

Paste_Image.png

没错，少了一个构成的“构”字。（不同电脑可能分辨率不同，在你的电脑上不一定是这个字）

这是为什么呢？

原来，我们在判断溢出的时候，是用scrollHeight和clientHeight进行比较的，而要使scrollHeight > clientHeight,必然是在文字已经溢出的时候。

也就是说，

if(box.scrollHeight > box.clientHeight){
    clearInterval(timer);
    return;
}

当程序进入这一段逻辑的时候，文字就已经溢出了，不多不少，正好溢出一个字。

解决方法很简单，我们只需要将这个多出来的字符保存下来，下一次执行start方法的时候，补上去就OK了。

var gameDialog = function(id,text,speed){
    var box = document.getElementById(id);
    var text = text;
    var len = text.length;
    var timer = null;
    var index = 0;
    var character = '';
    
    function start(){
        box.innerHTML = '';
        timer = setInterval(function(){
            if(box.scrollHeight > box.clientHeight){
                //将溢出的那个字保存在下来
                character = text.charAt(index - 1); //因为上一次已经 ++了，所以这里要减一
                clearInterval(timer);
                return;
            }
            if(index == len){
                clearInterval(timer);
            }
            
            if(character){
                box.innerHTML += character;
                character = '';//重置该字符
            }else{
                box.innerHTML += text.charAt(index++);
            }
            
        },speed);
}
    
start();

box.onclick = function(){
    start();
}

这样就解决少一个字符的问题了。