的jsfiddle代码在我的网站不能正常工作

HTML：的jsfiddle代码在我的网站不能正常工作

<div id="container"> 
<div id="bar"> 
</div> 
</div>

CSS：

#container { 
width: 20px; 
height: 150px; 
position: relative; 

} 
#bar { 
width: 100%; 
height: 100%; 
background-color: red; 
position: absolute; 
bottom: 0px; 
}

JS：

function Bar(element) { 
this.barEl = element; 
this.progress = 100; 
} 

Bar.prototype.setProgress = function (p) { 
if(p >= 0) { 
    this.progress = p; 
    this.barEl.style.height = this.progress + "%"; 
} 
} 

var barObj = new Bar(document.getElementById('bar')); 
setInterval(function() { 
barObj.setProgress(barObj.progress - 10); 
}, 1000);

这从的jsfiddle http://jsfiddle.net/Mp7R3/代码时，我复制粘贴不工作代码，但它工作正常jsfiddle。可能我有一些onLoad问题，但我不知道如何解决它。我试过$（文件）。就绪（函数（），但它没有帮助

来源

2014-03-13 Rushi

如果您尝试过'$（document）.ready（function（）'，那么它将不起作用，因为该行缺少最后一次关闭'）'。而且，你确定你包含HTML的正确HTML标签吗？如''，''等 – TylerH

是的，我已经包含了所有的html标签，并且还为$（document）.ready（function（）{}）编码了正确的语法。 – Rushi

@Rushi是应该向下移动还是缩小的酒吧？如果是这样，它似乎为我工作。 –

确保您不会忘记的脚本在你的代码的调用<head> jQuery的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

你也可以尝试将代码放在代码的底部，这样只有在加载完整页面的情况下才能运行。

我还在下面写了最简单的页面，以使此代码可以工作（通常您应该将HTML，CSS和JS分开），所以你可以自己比较：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

     <title>- That's Work!!! -</title> 

     <style> 

     #container { 
      width: 20px; 
      height: 150px; 
      position: relative; 
     } 

     #bar { 
      width: 100%; 
      height: 100%; 
      background-color: red; 
      position: absolute; 
      bottom: 0px; 
     } 

     </style> 

    </head> 
    <body> 
     <div id="container"> 
      <div id="bar"> 
      </div> 
     </div> 
    </body> 

    <script type="text/javascript"> 
     function Bar(element) { 
      this.barEl = element; 
      this.progress = 100; 
     } 

     Bar.prototype.setProgress = function (p) { 
      if(p >= 0) { 
       this.progress = p; 
       this.barEl.style.height = this.progress + "%"; 
      } 
     } 

     var barObj = new Bar(document.getElementById('bar')); 
     setInterval(function() { 
       barObj.setProgress(barObj.progress - 10); 
     }, 1000); 

    </script> 
</html>

我希望它能帮助你！

来源

2014-03-13 19:05:16 Rofez

的jsfiddle代码在我的网站不能正常工作

回答

相关问题