Question

我正在制作个人网页，并且正在使用JavaScript在名为“我的故事”的标题下创建键入效果。文本类型很好，但是一旦完成输入，光标将停留在底部。我需要更改/添加代码来解决此问题？

输入文本后，我希望光标消失。没有错误消息。

// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");

function Type() {
  var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;

  if (text === _CONTENT[_PART]) {
    _CURSOR.style.display = "none";

    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Delete, 50);
    }, 1000);
  }
}

_INTERVAL_VAL = setInterval(Type, 100);

body {
  background: dodgerblue !important;
  color: white !important;
}

h3 {
  border-left: 6px solid whitesmoke;
  background-color: lightslategray;
}

p5 {
  text-align: justify;
}

p4 {
  text-align: justify;
}

#container {
  text-align: center;
}

#text {
  display: inline-block;
  vertical-align: middle;
  color: white;
  letter-spacing: 2px;
}

#cursor {
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 50px;
  background-color: white;
  animation: blink .75x step-end infinite;
}

@keyframes blink {
  from,
  to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}

 ::-webkit-scrollbar {
  width: 5px;
}

 ::-webkit-scrollbar-track {
  background: whitesmoke;
}

 ::-webkit-scrollbar-thumb {
  background: grey;
}

 ::-webkit-scrollbar-thumb:hover {
  background: dodgerblue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row align-items-start">
  <div class="col">
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Me</a>
        </li>
      </ul>
    </nav>
    <header>
      <title>
        Robert Smith
      </title>
    </header>

    <body>
      <p class="bg-primary text-white">
  </div>
  <div class="col ml-auto"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col">
    <h1>
      <b>
                <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
            </b>
    </h1>
    <h2 class="display-4 ml-3"> I want to make a difference.
    </h2>
    <h3>
      <div class="ml-3">
        My Story
      </div>
    </h3>
    <divT>
      <p1>
        <div id="container">
          <div id="text"></div>
          <div id="cursor"></div>
        </div>

        <span class="border border-dark">
                <div class = "ml-3" >
                <br>
                </div>
                </span>
      </p1>
      <p6>
        <div class="ml-3">
          I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
        </div>
      </p6>
    </divT>
    <h4>
      Contact me
    </h4>
    <p6>
      <ul3>
        <li>Email: robertethansmith@yahoo.com</li>
        <li>GitHub: roberto257</li>
      </ul3>
    </p6>
  </div>
  <div class="col">
    <script language="javascript">
      //Changes images when clicked
      function changeImage() {
        if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {

          document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
        } else {
          document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
        }
      }

      function changeImage2() {
        if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {

          document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
        } else {
          document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
        }
      }
    </script>
    <p2>
      <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
      <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
    </p2>
  </div>
  <div class="col mt-5">
    <p5>
      <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
      <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I 
                    truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
    </p5>
    <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
    <p4>
      <br> My current skills include but are not limited to:
      <ul2>
        <li>Python</li>
        <li>Web Development</li>
        <li>JavaScript</li>
        <li>Java</li>
      </ul2>
      I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
    </p4>
  </div>
</div>
<div class="row">
  <div class="col">
  </div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 1

也许，试试这个？我要添加伪类：之后，并加上content: '|'并在末尾删除该类。

(function(){
/* cut the text for demo */
let text = "When I was 15, I took a Robotics Honors course at my high school."

let bubu = document.getElementById('bubu');
for( let i = 0; i < text.length; i++ ){
  setTimeout( function(){
    bubu.innerText += text.charAt(i); 
  }, i*100);
}

setTimeout(function(){
  document.getElementById('bubu').classList.remove('bubu');
}, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */

})();

#bubu {
  text-align: center;
  width: 400px;
  font-size: 20px;
}

.bubu:after {content: '|'; color: red;}

<div id="bubu" class="bubu"></div>

P.s。我用过text.split('')-将每个字符排序成数组...
已更改→text.charAt(i);因评论*

Answer 2

除非我误解了您的要求，否则看起来一旦输入完成，您似乎只是缺少一个Delete函数来被触发。这样的事情应该可以解决问题：

function Delete() {
  _CURSOR.style.display = "none";
}

Answer 3

就像您要从数组中插入文本一样，在文本/ innerHtml之后也插入光标。尝试运行该代码段，这就是您所期望的吗？仅进行更改-_ELEMENT.appendChild(_CURSOR);

// Displays "My Story" with a typing effect
var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");

function Type() {
  var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _ELEMENT.appendChild(_CURSOR);
  _PART_INDEX++;

  if (text === _CONTENT[_PART]) {
    _CURSOR.style.display = "none";

    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
      _INTERVAL_VAL = setInterval(Delete, 50);
    }, 1000);
  }
}

_INTERVAL_VAL = setInterval(Type, 100);

body {
  background: dodgerblue !important;
  color: white !important;
}

h3 {
  border-left: 6px solid whitesmoke;
  background-color: lightslategray;
}

p5 {
  text-align: justify;
}

p4 {
  text-align: justify;
}

#container {
  text-align: center;
}

#text {
  display: inline-block;
  vertical-align: middle;
  color: white;
  letter-spacing: 2px;
}

#cursor {
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 50px;
  background-color: white;
  animation: blink .75x step-end infinite;
}

@keyframes blink {
  from,
  to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}

 ::-webkit-scrollbar {
  width: 5px;
}

 ::-webkit-scrollbar-track {
  background: whitesmoke;
}

 ::-webkit-scrollbar-thumb {
  background: grey;
}

 ::-webkit-scrollbar-thumb:hover {
  background: dodgerblue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row align-items-start">
  <div class="col">
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Me</a>
        </li>
      </ul>
    </nav>
    <header>
      <title>
        Robert Smith
      </title>
    </header>

    <body>
      <p class="bg-primary text-white">
  </div>
  <div class="col ml-auto"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col">
    <h1>
      <b>
                <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div>
            </b>
    </h1>
    <h2 class="display-4 ml-3"> I want to make a difference.
    </h2>
    <h3>
      <div class="ml-3">
        My Story
      </div>
    </h3>
    <divT>
      <p1>
        <div id="container">
          <div id="text">  </div>
         <div id="cursor"></div>
        </div>

        <span class="border border-dark">
                <div class = "ml-3" >
                <br>
                </div>
                </span>
      </p1>
      <p6>
        <div class="ml-3">
          I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours.
        </div>
      </p6>
    </divT>
    <h4>
      Contact me
    </h4>
    <p6>
      <ul3>
        <li>Email: robertethansmith@yahoo.com</li>
        <li>GitHub: roberto257</li>
      </ul3>
    </p6>
  </div>
  <div class="col">
    <script language="javascript">
      //Changes images when clicked
      function changeImage() {
        if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") {

          document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG";
        } else {
          document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG";
        }
      }

      function changeImage2() {
        if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") {

          document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG";
        } else {
          document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG";
        }
      }
    </script>
    <p2>
      <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" />
      <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" />
    </p2>
  </div>
  <div class="col mt-5">
    <p5>
      <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own.
      <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I 
                    truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br>
    </p5>
    <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python">
    <p4>
      <br> My current skills include but are not limited to:
      <ul2>
        <li>Python</li>
        <li>Web Development</li>
        <li>JavaScript</li>
        <li>Java</li>
      </ul2>
      I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br>
    </p4>
  </div>
</div>
<div class="row">
  <div class="col">
  </div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 4

我喜欢OPTIMUS PRIME idea（+1），但它也应该更好地与setInterval配合使用

我有几句话：
1-使用textContent更合适（如果您不使用html标签）
2-使用箭头功能影响局部变量
3-您不需要CSS来设置闪烁光标

所以我做了这个（它使用html标签） 如果禁用了JS（没有动画，但显示了文本），它也可以工作

Text_Typed('bubu');

function Text_Typed( eID, delay = 100)
{
  let
    element   = document.getElementById(eID),
    txt       = element.innerHTML,
    Text_Sz   = txt.length,
    sItv_id   = null,
    Text_html = '',
    loop_i    = -1,
    Cursor_i  = 1;

  element.textContent = '&#9646;'; // or '|';

  sItv_id = setInterval(_=>{
    loop_i++;
    if (loop_i < Text_Sz)
    {
      let n, inC = txt.charAt(loop_i);

      switch (inC) {
        case '<':
          n = txt.indexOf('>',loop_i);
          if (n>0)
          {
            inC = txt.substring(loop_i,++n);
            loop_i = --n;
          }
          break;
        case '&':
        n = txt.indexOf(';',loop_i);
        if (n>0)
        {
          inC = txt.substring(loop_i,++n);
          loop_i = --n;
        }
        break;
      }
      Cursor_i          = (Cursor_i+1) % 2;
      Text_html        += inC;
      element.innerHTML = Text_html + ((Cursor_i)?'&#9646;':'&#9647;');  //  or '|' &thinsp; &#9609;
    }
    else {
      element.innerHTML = Text_html;
      clearInterval(sItv_id);
    }
  }, delay);
}

#bubu {
  text-align : center;
  width      : 400px;
  font-size  : 20px;
}

<div id="bubu" >
  <p>When I was 15, I took a Robotics Honors course at my high school.</p>
  <p>We designed and built robots using <span style="color:crimson">VEX&nbsp;robotics&nbsp;kits</span>.</p>
  <p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p>
  <p>This is what inspired me to code.</p>
  <p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p>
  <p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer 
  <b>capabilities</b> from this point on.</p>
</div>

JavaScript的打字效果：所有“文字”输入后如何删除光标

4 个答案: