Question

我知道原因会非常简单，但是我无法完成这项工作，我在同一个文件夹中有一个html，一个css和一个js，这个example无效

我已将3个文件放在同一个文件夹中：

HTML：

    <head>
    <!-- Bootstrap Core CSS -->
    <link href="barras.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script src="barras.js"></script>
</head>

<div id="container">
<h2><strong>Bar percentage</strong> inspired by this <a href=
    "http://dribbble.com/shots/1090476-Percentage-Bar">dribbble shot</a></h2>

  <div id="bar-1" class="bar-main-container azure">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="38"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>  
</div>

的Javascript

$('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 2000,
    easing:'linear',
    step: function() {
      // What todo on every count
    var pct = '';
    if(percentage == 0){
      pct = Math.floor(this.countNum) + '%';
    }else{
      pct = Math.floor(this.countNum+1) + '%';
    }
    progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});

和css与示例中的相同。

我想我没有正确调用javascript。这是第一次使用js。

非常感谢你的帮助。

javascript没有工作动画百分比栏

0 个答案: