javascript - 如何在第二行之后停止打字效果？

Question

我想在写第二行时停止打字。只显示第二行，不应该再次执行，当它停止时右边框应该是none。任何人，请帮助我，我现在需要修复它。

var _CONTENT = [ "First line.", "Second Line." ];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;
    if(text === _CONTENT[_PART]) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);

    }
}
function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;
    if(text === '') {
        clearInterval(_INTERVAL_VAL);
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
clearInterval(_CONTENT);

    }
}
_INTERVAL_VAL = setInterval(Type, 100);

#text {
    display: inline-block;
    color: #000;
    font-size: 50px;
    border-right: 6px solid #000;
    font-weight: bold;
    font-family: Mermaid;
}

<div id="hello-content">
    <h1><div id="text"></div></h1>
</div>

标签： javascripthtmldom-eventsjavascript-objects

Answer 1

var _CONTENT = [ "First line.", "Second Line." ];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  
   
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;
     if(text==="Second Line."){

      clearInterval(_INTERVAL_VAL);
    }
    else if(text === _CONTENT[_PART] ) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);

    }
}
function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;
    if(text === '') {
        clearInterval(_INTERVAL_VAL);
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
clearInterval(_CONTENT);

    }
}
_INTERVAL_VAL = setInterval(Type, 100);

<div id="hello-content">
    <h1><div id="text"></div></h1>
</div>