Question

我制作了打字机效果，将首先键入一个字符串，然后再次将其删除。此处显示：https://www.w3schools.com/code/tryit.asp?filename=FZAVKJW3BPSV

但是，从输出中可以看到，有一个'>'标记不会消失！我已经尝试了一切。

我粘贴了以下错误的函数：

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      if(text == 0){
        return;
      }
      document.getElementById('test').innerHTML = text;

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
      if( char === '<' ) isTag = false;

      if (isTag) return removeType(i,isTag,text,str2);
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

Answer 1

函数removeType中的问题是，当您仅解析if (isTag)时，您不会进入<主体。这样一来，在下一个计时器计时之前，该字符就一直可见。

通过将if条件更改为：

if (isTag || char === '<')

不相关，但您还应该更改：

if(text == 0){

....，因为该条件永远不会成立（除非全文的第一个字符为“ 0”）。更改为：

if (!text.length){

Answer 2

替换

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      if(text == 0){
        return;
      }
      document.getElementById('test').innerHTML = text;

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
      if( char === '<' ) isTag = false;

      if (isTag) return removeType(i,isTag,text,str2);
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

作者

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      document.getElementById('test').innerHTML = text;
      if(text === ''){
        return;
      }

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;

      if (isTag) {
        if( char === '<' ) isTag = false;
        return removeType(i,isTag,text,str2);
      }
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

有两个相同的问题。

如果您在字符串为空但在显示更新之前退出，则将保留一个字符（并且字符串==“”非0）

如果您说标签仍在处理中而完成，它将出现。您必须记住，标记已完成下一轮。可能有几种方法，但是我建议的方法不会创建新变量。

您还可以使用它来删除标签：

  str2.replace(/<[^>]*>/g, '');

或（警告，该字符串必须可信）：

  var str2 = "Hello Stackoverflow<span class='punc'>?</span>";

  const el = document.createElement('p');
  el.innerHTML = str2;
  str2 = el.innerText;

window.onload = function(){
      var str2 = "Hello Stackoverflow<span class='punc'>?</span>";
      i = 0;
      j = 0;
      isTag = false;
      text = "";
      type(i,isTag,text,str2);
    }
      function type(i,isTag,text,str2){
        text = str2.slice(0, ++i);
        if (text === str2) {
          setTimeout(function() { removeType(i,isTag,text,str2);}, 2000);
          return;
        }
        document.getElementById('test').innerHTML = text;

        var char = text.slice(-1);
        if( char === '<' ) isTag = true;
        if( char === '>' ) isTag = false;

        if (isTag) return type(i,isTag,text,str2);
        setTimeout(function() { type(i,isTag,text,str2);}, 80);
    }

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      document.getElementById('test').innerHTML = text;

      if(text === ''){
        return;
      }
      
      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
    
      if (isTag) {
        if( char === '<' ) isTag = false;
      	return removeType(i,isTag,text,str2);
      }
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

<div id="test"> </div>

innerHTML仍在计数标签吗？

2 个答案: