脚本适用于 jsfiddle 但不适用于 HTML 文档答案

【问题标题】：Script works in jsfiddle but not HTML document脚本适用于 jsfiddle 但不适用于 HTML 文档
【发布时间】：2016-06-30 14:47:28
【问题描述】：

我在 jsfiddle 中有一个可以运行的脚本：https://jsfiddle.net/oxw4e5yh/

但是在 HTML 文档中它不起作用：

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

<head>
    <script type="text/javascript">
        function calcSpeed(speed) {
            // Time = Distance/Speed
            var spanSelector = document.querySelectorAll('.marquee span'),
                i;
            for (i = 0; i < spanSelector.length; i++) {
                var spanLength = spanSelector[i].offsetWidth,
                    timeTaken = spanLength / speed;
                spanSelector[i].style.animationDuration = timeTaken + "s";
            }
        }
        calcSpeed(75);
    </script>


    <style>
        /* Make it a marquee */

        .marquee {
            width: 100%;
            left: 0px;
            height: 10%;
            position: fixed;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            background-color: #000000;
            bottom: 0px;
            color: white;
            font: 50px'Verdana';
        }
        .marquee span {
            display: inline-block;
            padding-left: 100%;
            text-indent: 0;
            animation: marquee linear infinite;
            animation-delay: 5s;
            background-color: #000000;
            color: white;
            bottom: 0px;
        }
        /* Make it move */

        @keyframes marquee {
            0% {
                transform: translate(10%, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }
        /* Make it pretty */

        .scroll {
            padding-left: 1.5em;
            position: fixed;
            font: 50px'Verdana';
            bottom: 0px;
            color: white;
            left: 0px;
            height: 10%;
        }
    </style>
</head>

<body>
    <div class="marquee">
        <span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
    </div>

</body>

</html>

脚本是一个 css 和 javascript 字幕，用于控制滚动文本的稳定速度。

知道我错过了什么吗？

此外，正如您在小提琴中看到的那样，文本开始滚动需要一段时间。我可以减少延迟吗？

【问题讨论】：

当您尝试在 jsfiddle 之外使用它时，您能否更具体地说明什么不起作用？当您尝试运行控制台时，控制台是否会给您任何消息？
有可能你的 JavaScript 在文档准备好之前就已经运行了
你的小提琴在我使用时坏了。除非你期待的是一个黑色的实心大盒子
你在哪里执行了 javascript 代码？
它无法工作，因为您的脚本是在 DOM 尚未准备好时执行的，因此它正在尝试访问（尚）不存在的元素。将您的函数包装在 onload 事件中以解决问题，或者将您的脚本移动到身体的底部，尽管最佳实践是明确地包装 onload。

标签： javascript jquery html css

【解决方案1】：

在所有 DOM 准备就绪后调用您的 JS 函数，通常使用window.onload 来完成，如下所示：

window.onload = function() {
    calcSpeed(75);
}

【讨论】：

【解决方案2】：

您正在尝试选择尚未创建的元素。

将您的脚本移动到选取框下方

<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script>

【讨论】：

另外，正如您在小提琴中看到的那样，文本开始滚动需要一段时间。我可以减少延迟吗？
@Wienievra 您已将延迟设置为 5 秒。（动画延迟：5s；）。将延迟更改为较低的值以更快地开始滚动。

【解决方案3】：

将您的脚本和样式代码放在正文关闭之前。

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

</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script> 


<style>
/* Make it a marquee */

.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>

</html>

这对我有用

【讨论】：

【解决方案4】：

您应该将所有脚本写在页面的最后，因为脚本会尝试查找标签 id 并且 DOM 那时还没有准备好而不是报错。

示例

<html>
    <head>
        <style>
            /* your style here */
        </style>
    </head>
    <body>
        <!-- your html here -->
        <script>
            // your script here
        </script>
    </body>
</html>

请阅读 JavaScript and CSS order

【讨论】：

【解决方案5】：

看到这个

function calcSpeed() {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / 1000;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
//calcSpeed(10);
}
</script>



<body onload="calcSpeed()">

我在 Chrome 和 Firefox 上对其进行了测试...运行良好。所以，我想它也应该对你有用。

【讨论】：