Javascript 脚本可以在JSFIDLE中工作，但不能在HTML文档中工作_Javascript_Jquery_Html_Css

Javascript 脚本可以在JSFIDLE中工作，但不能在HTML文档中工作

javascript jquery html css

Javascript 脚本可以在JSFIDLE中工作，但不能在HTML文档中工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在JSFIDLE中有一个脚本可以工作：但是，在HTML文档中，它不起作用： <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function calcSpeed(speed) { // Time = Distance/Speed var spanSelector = docum

我在JSFIDLE中有一个脚本可以工作：

但是，在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>


功能calcSpeed（速度）{
//时间=距离/速度
var spanSelector=document.querySelectorAll（'.marquee span'），
我
对于（i=0；i


该脚本是一个css和javascript字幕，用于控制滚动文本的稳定速度
知道我错过了什么吗
此外，正如您在小提琴上看到的，文本开始滚动需要一段时间。我可以减少延迟吗？
您正在尝试选择一个尚未创建的元素
将脚本移动到字幕下方
<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> 


大量的文字，写在一个长句，使它离开屏幕。我希望它能从屏幕上消失
功能calcSpeed（速度）{
//时间=距离/速度
var spanSelector=document.querySelectorAll（'.marquee span'），
我
对于（i=0；i
您正在尝试选择尚未创建的元素
将脚本移动到字幕下方
<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> 


大量的文字，写在一个长句，使它离开屏幕。我希望它能从屏幕上消失
功能calcSpeed（速度）{
//时间=距离/速度
var spanSelector=document.querySelectorAll（'.marquee span'），
我
对于（i=0；i
在所有DOM就绪后调用JS函数，通常通过使用窗口来完成。onload
如下所示：
window.onload = function() {
    calcSpeed(75);
}

在所有DOM就绪后调用JS函数，通常通过使用window.onload
完成，如下所示：
window.onload = function() {
    calcSpeed(75);
}

在结束正文之前，请输入脚本和样式代码
<!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>


大量的文字，写在一个长句，使它离开屏幕。我希望它能从屏幕上消失
功能calcSpeed（速度）{
//时间=距离/速度
var spanSelector=document.querySelectorAll（'.marquee span'），
我
对于（i=0；i

这在我身上起作用
请在结束正文之前输入脚本和样式代码
<!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>


大量的文字，写在一个长句，使它离开屏幕。我希望它能从屏幕上消失
功能calcSpeed（速度）{
//时间=距离/速度
var spanSelector=document.querySelectorAll（'.marquee span'），
我
对于（i=0；i

这对我很有效
你应该写所有的