Question

有人能告诉我进度条的工作原理吗？在我的HTML

中

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      <script type="javascript/text">
         var progress = setInterval(function() {
             var $bar = $('.bar');

             if ($bar.width()==400) {
                clearInterval(progress);
                $('.progress').removeClass('active');
             } else {
                $bar.width($bar.width()+40);
             }
             $bar.text($bar.width()/4 + "%");
         }, 800);
      </script>
    </head>
<body>
   <div class="container">
     <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
     </div>
   </div>
</body>

在我的CSS中：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
   margin-top: 30px;
   width: 400px;
}

它出了什么问题？运行后我无法得到任何东西。我也是在服务器上运行它。我从这里得到它：http://jsfiddle.net/xXM2z/ 请帮忙。

Answer 1

您的代码中不包含bootstrap.js - 在fiddler中，这是leftside上的复选框动态包含的内容。在独立代码中正确安装bootsrap。

Answer 2

尝试在代码中使用<script type='text/javascript'>代替<script type='javascript/text'> ...

甚至只是<script>没有type属性，几乎所有浏览器都会将它解释为javascript。

编辑 - @killer_PL也有一点 - 该文件也需要包含在内。没想到......

进度条不起作用

2 个答案: