0

我正在创建一个进度条它在 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/

4

2 回答 2

0

查看“外部资源”下方的 jsfiddle 左侧边栏。您正在为您嵌入 jQuery UI css 和 js progressbar()，但是您的 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>
于 2013-04-03T11:51:01.353 回答
0

它不起作用的原因有以下三个：

  • 正如 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>
于 2013-04-03T12:09:00.417 回答