javascript - 不使用 HTML 的打字效果 JS

问题描述

嘿伙计们，我有一个 JS 代码，我正在尝试制作动画，有点像打字效果。我知道我可以为此目的使用 typed.js，但这需要传入一个 HTML 容器。在这种情况下，我无权访问，我的意思是我有 index.html 但我试图制作动画的文本不是 HTML 而是 JS。尽管由于某种原因，当我在网页上检查此文本元素时，它确实以 HTML 格式显示文本。我知道这有点难以理解，所以我附上了 index.html 和 JS 代码的代码片段。

JS 代码：在这里我要为字幕部分设置动画

[![const greeting = {
  username: "Mr.",
  title: "Hi all,",
  subTitle: emoji(
    "A fanatic Full Stack Software Developer  having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."
  ),
  displayGreeting: true // Set false to hide this section, defaults to true
};][1]][1]

index.html，您会注意到它不包含我想要制作动画的元素，但是当我检查网页上的元素时，它会作为其中的一部分出现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7">
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7">
  <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7" color="#885bd5">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <meta name="msapplication-TileColor" content="#603cba">

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#6c63ff" />
  <meta name="My Portfolio" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v8=qAJ44G5Bm7">
  <meta property="og:title" content="My Portfolio" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://developerfolio.js.org/" />
  <meta property="og:image" content="https://developerfolio.js.org/static/media/developerActivity.59389695.svg" />
  <link rel=preload href="/static/media/Montserrat-Regular.ee653992.ttf" as="font" type="font/woff" crossorigin>
  <link rel=preload href="/static/media/Agustina.21f233e1.woff" as="font" type="font/woff" crossorigin>

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135618960-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-135618960-2');
  </script>
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.13.0/css/all.min.css">

  <title>Trial/title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
 </body>

</html>

请帮我解决这个问题，我将不胜感激！

标签： javascripthtmltyped.js

javascript - 不使用 HTML 的打字效果 JS

问题描述

解决方案

推荐阅读