js实现打字机效果

不要失眠啊！

于 2024-07-16 09:20:17 发布

阅读量177

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_61672533/article/details/140456394

版权

我是免费的,别人要收钱！！！

我是使用原生html+js+typeit.js实现的效果如下，我里面的内容是写死的

typeit：

直接上代码了，没什么好说的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./typewriter.css" />
  </head>
  <body>
    <!-- #373737 -->
    <!-- <div id="element"></div> -->
    <div class="header">AI 创作助手</div>
    <div class="content">
      <!-- <div class="question_area">
        <div class="user_info">
          <img
            class="user_avatar"
            src="https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png"
            alt="" />
          <div class="user_name">你好！！！！</div>
        </div>
        <div class="problem" id="problem"></div>
      </div>

      <div class="answer_area">
        <div class="AI_avatar">
          <div class="left_block">
            <img
              class="AI_img"
              src="https://i0.hdslb.com/bfs/face/87b9e73f5913f8be3543e28860f8f8574668e040.jpg"
              alt="" />
            <div class="creative_assistant">创作助手</div>
          </div>
          <button class="copy_button" onclick="copyTeXt()">复制</button>
        </div>
        <div class="answer_content" id="answer_content"></div>
      </div> -->
    </div>

    <div class="footer">
      <input
        class="questions"
        type="text"
        placeholder="提出问题"
        id="questions" />
      <button class="sent" id="submit">
        <img
          class="sent_img"
          src="https://bpic.588ku.com/element_origin_min_pic/00/37/54/4156d54d7fde5f8.jpg"
          alt="" />
      </button>
    </div>
    <script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
    <script>
      var key = 1;
      var disabled = false;
      var text =
        " pop()：移除数组的最后一个元素，并返回被移除的元素。<br/>shift()：移除数组的第一个元素，并返回被移除的元素。同时，所有后续元素会向前位移一个索引位置。 ";
      var buttonElement = document.getElementById("submit");
      var inputElement = document.getElementById("questions");
      var answer_content = document.querySelector(".content");

      buttonElement.onclick = function () {
        if (inputElement.value == "") return;
        inputElement.disabled = true;
        answer_content.innerHTML += `
        <div>
            <div class="question_area">
        <div class="user_info">
          <img
            class="user_avatar"
            src=""
            alt="" />
          <div class="user_name">你好！！！！</div>
        </div>
        <div class=" problem" id="problem_${key + 1}"></div>
      </div>

      <!-- 解答 -->
      <div class="answer_area">
        <div class="AI_avatar">
          <div class="left_block">
            <img
              class="AI_img"
              src="https://i0.hdslb.com/bfs/face/87b9e73f5913f8be3543e28860f8f8574668e040.jpg"
              alt="" />
            <div class="creative_assistant">创作助手</div>
          </div>
          <button class="copy_button" onclick="copyTeXt()">复制</button>
        </div>
        <div class="answer_content" id="answer_content${key + 1}"></div>
      </div>
      </div>
      `;
        var problemElemnt = document.getElementById(`problem_${key + 1}`);
        problemElemnt.innerText = inputElement.value;
        inputElement.value = "";
        new TypeIt(`#answer_content${key + 1}`, {
          // strings: text,
          speed: 75,
          // loop: true,
        })
          .type(text)
          .exec(async () => {
            inputElement.disabled = false;
          })
          .go();
        key += 1;
      };
      // 复制
      function copyTeXt() {
        navigator.clipboard.writeText(text);
      }
    </script>
  </body>
</html>

css样式

body {
  margin: 0;
  padding: 0;
}
.header {
  box-sizing: border-box;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-left: 20px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #373737;
  font-weight: bold;
  background: #ffffff;
}
/* 内容 */
.content {
  margin: 51px 0 80px 0;
  /* padding: 20px 0; */
}
.question_area {
  border-bottom: 1px solid #ccc;
}
/* 用户信息 */
.user_info {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
.user_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user_name {
  margin-left: 10px;
}

/* 问题 */
.problem {
  padding:0 20px 15px 20px;
}

/* 解答 */
.answer_area {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background: #f7f7fa;
}
/* AI 头像 */
.AI_avatar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left_block {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.AI_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.creative_assistant {
  margin-left: 10px;
}

.answer_content{
    margin-top: 10px;
    line-height: 30px;
}



.footer {
  box-sizing: border-box;
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding: 20px;
  border-top: 1px solid #ccc;
  background: #ffffff;
}
.questions {
  flex: 1;
  padding: 5px 10px;
  border: none;
  outline: none;
  background: #f2f4f6;
  border-radius: 8px;
}
.sent {
  margin-left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sent_img {
  width: 20px;
  height: 20px;
}