可自定义刻度jQuery进度条

<div class="htmleaf-container">       <div id="container">           <div class="padded">               <div id="PRogressHolder"></div>               <div id="progressReset">生成随机的风格</div>           </div>       </div>   </div>   <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>   <script src="js/jquery.progressdots.js"></script>   <script src="js/prism.js"></script>   <script>       $(document).ready(function () {           createSpots(1);           $("#progressReset").click(function (event) {               event.preventDefault();               createSpots(1);           });           function createSpots(num) {               for (var i = 0; i < num; i++) {                   options = {                       dotSize: random(10, 20) + "px",                       radius: random(1, 7) * 10 + "%"                   };                   randomHtml = "";                   if (Math.random() < 0.5) {                       options.randomColors = true;                       randomHtml += "/n/trandomColors: " + options.randomColors + ", //use random colors";                   }                   else {                       options.dotColor = randomColor();                       randomHtml += "/n/tdotColor: '" + options.dotColor + "', //set dot color (#HEX)";                   }                   if (Math.random() < 0.3) {                       options.progress = true;                       options.percent = random(5, 100);                       randomHtml += "/n/tprogress: true, //enable progress";                       randomHtml += "/n/tpercent: " + options.percent + ", //set initial percentage";                   } else {                       options.numDots = random(3, 15);                       randomHtml += "/n/tnumDots: " + options.numDots + ", //number of dots";                   }                   string = "$( '#progressBox' ).dottify({/                       /n/tdotSize: '" + options.dotSize + "', //set size of dot" +                           randomHtml +                           "/n/tradius: '" + options.radius + "' //set dot corner radius/               /n});";                   var $container = $("<div class='swoopContainer'></div>").data("setupString", JSON.stringify(string));                   $("#progressHolder").append($container.hide());                   $container.slideDown(function () {                       $(this).css({ overflow: "hidden" });                   });                   $container.click(function () {                       $(".swoopContainer").removeClass("selected");                       $(this).addClass("selected");                       $("#jsContents").html(JSON.parse($(this).data("setupString")));                       Prism.highlightAll();                   });                   $container.dottify(options);                   $("#jsContents").html(string);                   Prism.highlightAll();               }               $(".swoopContainer").removeClass("selected");               $(".swoopContainer").last().addClass("selected");           }           function randomColor() {               return '#' + Math.floor(Math.random() * 16777215).toString(16);           }           function random(min, max) {               return Math.floor(Math.random() * ((max - min) + min) + min);           }       });   </script>