腳本作品中的jsfiddle而不是HTML文檔

我在的jsfiddle的腳本作品：https://jsfiddle.net/oxw4e5yh/腳本作品中的jsfiddle而不是HTML文檔

然而，在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選取框控制滾動文本的穩定速度。

任何想法我失蹤？

另外，正如您在小提琴上所看到的，文本開始滾動需要一段時間。我可以減少延遲嗎？

來源

2016-06-30 Wienievra

當您嘗試在jsfiddle之外使用它時，您可以更具體地瞭解哪些功能無法正常工作嗎？當您嘗試運行控制檯時，控制檯是否會提供任何消息？ – JoeL

在文檔準備就緒前，您的JavaScript正在運行 – phuzi

當我使用它時，您的小提琴已損壞。除非一個大的黑色固體盒子是你期望的 – 8protons

您正試圖選擇尚未創建的元素。

一旦將你的腳本下面的字幕

<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>

來源

2016-06-30 14:50:09 Musa

另外，正如您在小提琴上所看到的，文本開始滾動需要一段時間。我可以減少延遲嗎？ – Wienievra

@Wienievra您已將延遲設置爲5秒。（動畫延遲：5s;）。將延遲更改爲較低的值以更快地開始滾動。 – Scotow

打電話給你的JS功能，所有的DOM準備好了，這通常是由使用window.onload做如下：

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

來源

2016-06-30 14:50:31

把你的腳本和正文關閉前的樣式代碼。

<!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>

這部作品對我

來源

2016-06-30 14:54:05 mayk

你應該寫的所有腳本在最後一頁，因爲腳本將試圖找到標籤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

來源

2016-06-30 15:00:12

看到這個

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 ...完美的作品。所以，我認爲它也適用於你。

來源

2016-06-30 15:10:27

腳本作品中的jsfiddle而不是HTML文檔

回答

相關問題