Question

我正在创建一个progces栏它是在jsfiddle演示中正常工作但是当我在html文件中使用它不能在这里工作是我的代码我正在编写jsfiddle中给出的相同代码，但它无法正常工作

 <html>
 <head>
 <style>
  .ui-progressbar.beginning .ui-progressbar-value { background: red; }
  .ui-progressbar.middle .ui-progressbar-value { background: yellow; }
  .ui-progressbar.end .ui-progressbar-value { background: green; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 </head>


 <script>
  var $progressbar = $("div").progressbar();


  function updateProgressbar(current, target) {


   var value = parseInt(current / target * 100);

   $progressbar

   .progressbar("value", value)

   .removeClass("beginning middle end")


    .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
  }



  var total = 255;


   var working = 0;





 function update() {

   working++;
 updateProgressbar(working, total);
if (working < total) setTimeout(update, 10);

   }
var $progressbar = $("div").progressbar();

function updateProgressbar(current, target) {


var value = parseInt(current / target * 100);





$progressbar


    .progressbar("value", value)


    .removeClass("beginning middle end")


    .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");


   }





   var total = 255;


  var working = 0;


  function update() {


   working++;




updateProgressbar(working, total);


if (working < total) setTimeout(update, 10);


  }




  </script>
  </head>

<body onload="update()">

<div>


</div></body></html>

这里是js小提琴链接工作

http://jsfiddle.net/ZQrnC/305/

Answer 1

查看“外部资源”下方jsfiddle的左侧边栏。您正在为progressbar()嵌入jQuery UI css和js，但是您的html文件缺少jQuery UI。

在jquery-1.9.1.js - script-tag：

之后添加以下内容

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Answer 2

有三个原因导致它不起作用：

正如robbi5所说，你没有导入jquery ui JS和CSS文件
当页面尚未加载时，您的var $ progressbar在标题中初始化，因此无法找到div。换句话说，$ progressbar点什么都没有
您的进度条的高度为零，使其无法进入，您应该将其包裹在一个固定高度的容器div中

此外，您的代码包含重复的部分，但可能是由于错误的复制/粘贴。

以下是包含更正点的页面的更新工作版本。我只在chrome和firefox上快速检查了它的确有效。

<html>
 <head>
 <style>
  .ui-progressbar.beginning .ui-progressbar-value { background: red; }
  .ui-progressbar.middle .ui-progressbar-value { background: yellow; }
  .ui-progressbar.end .ui-progressbar-value { background: green; }
 </style>

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet">


     <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
     <script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

 </head>

 <script>

  var $progressbar;

  function updateProgressbar(current, target) {
       var value = parseInt(current / target * 100);

        $progressbar.progressbar("value", value).removeClass("beginning middle end")
        .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
  }

  var total = 255;
  var working = 0;

 function update() {
   $progressbar = $("#pbholder").progressbar();
   working++;
   updateProgressbar(working, total);
   if (working < total) setTimeout(update, 10);
  }

  </script>
  </head>

<body onload="update()">

<div id="container" style="height:50px">
    <div id="pbholder"> 
    </div>
</div>

</body></html>

进度条在html文件中不起作用

2 个答案: