第二行后如何停止打字效果?
How can I stop typing effect after second line?
我想在写到第二行时停止输入。只显示第二行,不应该再执行,停止时右边框应该是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>
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>
我想在写到第二行时停止输入。只显示第二行,不应该再执行,停止时右边框应该是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>
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>