Javascript dosen'；不能被HTML重新定义_Javascript_Html_Css_Animation

Javascript dosen'；不能被HTML重新定义

javascript html css animation

Javascript dosen'；不能被HTML重新定义,javascript,html,css,animation,Javascript,Html,Css,Animation,我有一个javascript函数，可以使段落中的字母从底部开始，而不是逐渐消失，但是当我将其插入html时，它只显示纯文本。。。该函数应该可以工作，我想我把它调用到html时出错了。我尝试设置动画的文本是标题“text is text”中的文本主HTML代码 <link rel="stylesheet" href="javascript/javascripit.js"> <link rel="stylesheet"

我有一个javascript函数，可以使段落中的字母从底部开始，而不是逐渐消失，但是当我将其插入html时，它只显示纯文本。。。该函数应该可以工作，我想我把它调用到html时出错了。我尝试设置动画的文本是标题“text is text”中的文本

主HTML代码

<link rel="stylesheet" href="javascript/javascripit.js">
<link rel="stylesheet" type="text/css" href="css/navbar.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="css/utilities.css">


</head>
<body>
    <!-- Navbar -->
    
    <div class ="main">
        <div class="navbar ">
        
          <div class="container flex lead ">
            <nav>
                <ul>
                    <li><a href="#">Acasa</a></li>
                    <li><a href="features.html">Proiecte</a></li>
                    <li><a href="docs.html">Recenzii</a></li>
                </ul>
            </nav>
            <div>
                <h1 class="ml7">
                    <span class="text-wrapper">
                      <span class="letters">Text is text</span>
                    </span>
                  </h1>
                  
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
                  
            </div>
            <div class="social sm">
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

还有javascript函数

var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml7 .letter',
    translateY: ["1.1em", 0],
    translateX: ["0.55em", 0],
    translateZ: 0,
    rotateZ: [180, 0],
    duration: 750,
    easing: "easeOutExpo",
    delay: (_el, i) => 50 * i
  }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

var textwapper=document.querySelector（'.ml7.letters'）；
textWrapper.innerHTML=textWrapper.textContent.replace（/\S/g，“$&”）；
动画。时间线（{loop:true}）
.添加({
目标：'.ml7.letter'，
translateY:[“1.1em”，0]，
translateX:[“0.55em”，0]，
翻译Z:0，
rotateZ:[180,0]，
持续时间：750，
放松：“easeOutExpo”，
延迟：（_el，i）=>50*i
}).添加({
目标：'.ml7'，
不透明度：0，
持续时间：1000，
放松：“easeOutExpo”，
延误：1000
});

HTML尝试加载Javascript，就像加载样式表一样。查看您的浏览器开发工具，您可能会在Javascript控制台中看到错误。使用

加载脚本。在您的情况下，这可能是：

<script src="javascript/javascripit.js"></script> /*mis-spelled name?? */

这样，在加载页面之前它不会运行。如果不这样做，并且Javascript恰好在HTML完全加载之前运行，则

.querySelector（）

操作可能返回null，从而导致Javascript失败

浏览器试图并行地做很多事情，以加快点击页面的可见时间。

您的HTML试图像加载样式表一样加载Javascript。查看您的浏览器开发工具，您可能会在Javascript控制台中看到错误。使用

加载脚本。我想O.Jones可能已经发现了这个问题，因为我在jsbin中尝试了你的代码，它似乎工作得很好<代码>不是加载JS文件的方式。使用

标记和一个问题，当我加载它时，我应该把它放在哪里？我看过一些教程，把它放在了最后，一些是在最后的乞讨head@VlAdTbK如果你把script标签放在最后，它会在上面的html加载后运行（这通常很方便）。现在我仔细研究了它，发现了一个奇怪的问题，我需要使用java脚本（从我的文件和站点）在像这样的html代码中使用两次，然后。。。所以基本上，无论是在代码的开头还是结尾，如果我删掉其中一个，代码都不会工作，这是为什么？

<script src="javascript/javascripit.js"></script> /*mis-spelled name?? */