时间戳

首页 > 解决方案 > JavaScript 的打字效果：“键入”所有文本后如何删除光标

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

问题描述

我正在制作个人网页，并使用 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>

标签： javascripthtml

解决方案

也许，试试这个？我添加了伪类：之后，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>

Ps 我用过text.split('')- 将每个字符排序到数组中...
更改→text.charAt(i);由于评论*

推荐阅读