javascript - 相同的代码在不同的 IDE 中不起作用 - html,css
问题描述
所以我有以下代码:
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
PS您可能需要按原样创建一个帐户,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>
标签 - 您有 a
<header>
,但 a<header>
是一个可见元素,应该只在<body>
. 您可能打算<head>
改用。
修复这些问题,代码按预期工作:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
... etc
</head>
<body>
... etc
这里最重要的是明确指定一个文档类型。没有它:
浏览器进入 Quirks 模式并尝试处理您的代码,就好像它是在 90 年代后期编写的一样。这意味着他们将模仿旧浏览器中存在的许多错误。如何做到这一点并不一致(因此您会得到明显不同的结果,例如,从 Firefox 到 Internet Explorer)。
DOCTYPE 的目的是告诉浏览器你正在编写什么类型的 HTML。省略 DOCTYPE 是无效的。没有“标准”格式。浏览器将尽力解析 HTML。但并非所有元素都会正确显示。DOCTYPE 是所有 HTML 文档的必需部分。
这会导致问题,因为document.documentElement.clientHeight
将被评估为整个页面的高度,而不是视口的高度(导致除以 0 并且整个 H 立即出现)
推荐阅读
- javascript - 每次点击后如何通过javascript添加自动序列号
- ruby-on-rails - 如何在 JSON 结果中分离键和值
- mongodb - Mongodb在查询时仅从文档中获取匹配的对象
- c - C程序从用户那里获取联系并将其添加到文件中
- php - 带有 Shopify 403 Forbidden 的 PHP Curl(API 访问范围未定义)
- spring-boot - Spring Batch 动态查询 JdbcPagingItemReader 并在步骤之间传递数据
- oracle - 无法使用 APEX_WEB_SERVICE 从 Oracle RDS 实例运行 REST API
- javascript - 我有两个站点,site.com1 和 site2.com 我想检查用户是否使用 PHP 从 site1 登录到 site2
- python - 如何使用python从表中获取所有列并将其作为csv文件保存在s3中
- java - 使用 IBM MQ 在 JmsTemplate.send 期间处理连接失败