个人中心
gpt4 book ai didi

javascript - 相同的代码在不同的 IDE 中不起作用 - html、css

转载 作者：行者123 更新时间：2023-12-04 08:11:28 25 4
gpt4 key购买 nike

所以我有以下代码:

document.addEventListener("DOMContentLoaded", function(event) { 

// Get a reference to the <path>
var path = document.querySelector('#star-path');

// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();

// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;

// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();

// When the page scrolls...
window.addEventListener("scroll", function(e) {
 
  // What % down is it? 
  // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  
  // Draw in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
    
  // When complete, remove the dash array, otherwise shape isn't quite sharp
 // Accounts for fuzzy math
  if (scrollPercentage >= 0.99) {
    path.style.strokeDasharray = "none";
    path.style.fill = "#47AF9A";
    
  } else {
  path.style.fill = "none";
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }
  
});
});
body {
  /* feel free to change height */
  height: 5000px;
  background: linear-gradient(
    to bottom,
    orange,
    darkblue
  );
}

h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: 100;
  padding: 25px 15px;
  text-shadow: 1px 1px 1px #333;
}

#star-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
}



Resources
<header>
  
    <link href="style.css" rel="stylesheet"/>
  <script src="script.js"></script>
</header>
  
  <body>
  <h1>Scroll-to-draw</h1>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
  <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
  </body>

这段代码在这里工作得很好，但它在我正在使用的 IDE 上不起作用，就像当我滚动时，我没有画线，但它只显示了整体输出，即 H 字母。你们可以看看这里: https://repl.it/join/xfuwhnru-hussainomer
附言您可能需要创建一个帐户，因为它是 repl.it但是你们能不能看看它，它会很有帮助，我真的很感激。我能想到的问题是我的代码中缺少一个引用，它在这里工作是因为 StackOverFlow 创建 一个引用，但不是每个 IDE 都有。有什么建议么？

最佳答案

您的 HTML 格式错误:
查看源代码:https://fixedstingytriangle--hussainomer.repl.co/
它是以下内容，并且只有以下内容:

<header>
  
    <link href="style.css" rel="stylesheet"/>
  <script src="script.js"></script>
</header>
  
  <body>
  <h1>Scroll-to-draw</h1>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
  <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
  </body>
  • 您没有 DOCTYPE
  • 您没有 <html>标签
  • 您有一个 <header> , 但是一个 <header>是一个可见元素，只能在 <body> 内.您可能打算使用 <head>反而。

    • 修复这些问题，代码按预期工作: 
    <!DOCTYPE html>
    <html>
    <head>
    <link href="style.css" rel="stylesheet"/>
    ... etc
    </head>
    <body>
    ... etc
    这里最重要的是明确指定一个文档类型。 Without it :

    The browser enters Quirks mode and tries to deal with your code as if it was written in the late 90’s. This means they will imitate many bugs that existed in the old browsers. It is not consistent on how to do this (so you will get significantly different results, for example, from Firefox to Internet Explorer).


    The purpose of DOCTYPE is to tell the browser what type of HTML you are writing. It is not valid to omit the DOCTYPE. There is no “Standard” format. The browser will just try to parse HTML as best it can. But not all elements will be displayed correctly. DOCTYPE is a required part of all HTML documents.


    这会导致问题，因为 document.documentElement.clientHeight将被评估为整个页面的高度，而不是视口(viewport)的高度(导致除以 0 并且整个 H 立即出现)

    关于javascript - 相同的代码在不同的 IDE 中不起作用 - html、css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65930101/

    25 4 0
    文章推荐： python - 在具有非唯一日期索引的数据帧上计算滚动中位数
    文章推荐： r - Flexdashboard - 传单不是全屏
    文章推荐： SvelteKit : how do I do slug-based dynamic routing?
    文章推荐： r - 将 fiddle 图与森林图对齐
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com