实现语句文字以打字机的方式逐字呈现出来

---

需求：实现文字打字机效果

需求：要求一个语句的文字可以逐个出现在文本框中，在每句话说完之后会出现按钮，点击按钮后，会继续进行新语句的文字打印，直到所有语句全部被打印出来。

实现效果如下：

代码如下：

html代码：

<div id="div2">
      <div id="div2-left">Me:</div>
      <div id="div2-right1">
        <textarea id="text" cols="30" rows="10" disabled="disabled"></textarea>
        <div id="div2-right2">
          <a id="continue" href="#"></a>
        </div>
      </div>
</div>

css代码：

* {
  margin: 0;
  padding: 0;
}
#div2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1140px;
  height: 300px;
  margin-left: -570px;
  margin-top: -150px;
}
#div2-left {
  display: inline-block;
  float: left;
  width: 130px;
  height: 300px;
  color: #ffa5cb;
  font-size: 25px;
  line-height: 55px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
}
#div2-right1 {
  width: 1010px;
  height: 300px;
  display: inline-block;
  float: left;
}
#div2-right2 {
  text-align: right;
  width: 1010px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  margin-top: -4px;
}
#text {
  width: 1010px;
  height: 240px;
  background-color: rgb(0, 0, 0, 0.6);
  color: #ffa5cb;
  font-size: 25px;
  line-height: 55px;
  border: none;
  margin: 0;
}
#continue {
  display: none;
  width: 50px;
  height: 50px;
  /* 按钮图标的路径 */
  background-image: url("倒三角.png");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 5px;
}

js代码：

var div2 = document.getElementById("div2");
var element = document.getElementById("text");
var btn = document.getElementById("continue");


var str = [
  "我的生活像一只果子， 我漫不经心地咬了几口，但没有品尝味道，也没有注意自己在吃。活到这个年纪长成这个模样，不是我的责任。这个模样得到认可，它就是我的模样。我欣然接受,也别无选择。我就是这个女孩，一经确定永不改变。",
  "经历过孤独的日子，我终于喜欢上自己的无知，与它们相处我感到惬意，如同那是一炉旺火。这时就该听任火焰缓缓燃烧，不说一句话，不评论任何事。必须在无知中自我更新。",
];
var nn = 0;

btn.onclick = function () {
  if (nn < str.length) {
    btn.style.display = "none";
    var txt = str[nn];
    var count = 0;
    function type() {
      if (count <= txt.length) {
        element.value = txt.substring(0, count);
        count++;
        if (count == txt.length + 1) {
          clearInterval(intervalID);
          btn.style.display = "inline-block";
        }
      } else {
        element.value = "";
        count = 0;
      }
    }
    var intervalID = setInterval(type, 30);
    nn = nn + 1;
  } else {
    // 所有话说完后进行的其他操作
  }
};

function showMessage() {
  btn.style.display = "none";
  var txt = str[nn];
  var count = 0;
  function type() {
    if (count <= txt.length) {
      element.value = txt.substring(0, count);
      count++;
      if (count == txt.length + 1) {
        clearInterval(intervalID);
        btn.style.display = "inline-block";
      }
    } else {
      element.value = "";
      count = 0;
    }
  }
  var intervalID = setInterval(type, 30);
  nn = nn + 1;
}
showMessage();

showMessage()函数的作用是在页面打开后自动进行打字机打印一句str[]中存储的语句。

---

总结

以上就是有关文字打印机样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。