1 <title></title> 2 <script src="../Js/NewJs_CFJ/jquery.js" type="text/javascript"></script> 3 <link href="../Js/NewJs_CFJ/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" /> 4 <link href="../Js/NewJs_CFJ/jquery-ui.theme.css" rel="stylesheet" type="text/css" /> 5 6 <script src="../Js/NewJs_CFJ/jquery-ui.js" type="text/javascript"></script> 7 8 <style type="text/css"> 9 10 .ui-progressbar { 11 position: relative; 12 } 13 .progress-label { 14 position: absolute; 15 text-align:center; 16 font-weight: bold; 17 text-shadow: 1px 1px 0 #fff; 18 } 19 </style> 20 <script type="text/javascript"> 21 22 function addValue(value){ 23 var pro = $("#divProgerssbar"); 24 var proLabel = $(".progress-label"); //进度条里面文字 25 26 var temp = 100; 27 if (Number(value) > 100) { 28 temp = Number(value); 29 } 30 pro.progressbar({ 31 value: Number(value), 32 max: temp 33 34 }); 35 proLabel.text(pro.progressbar("value") + "%"); 36 37 38 } 39 $(function () { 40 addValue(0); 41 42 $("#ss").click(function () { 43 addValue(46); 44 }); 45 $("#vv").click(function () { 46 addValue(234.5); 47 }); 48 }); 49 50 </script> 51 </head> 52 <body> 53 <form id="form1" runat="server"> 54 <input type="button" value="sdf" id="ss" /> 55 <input type="button" value="sdf" id="vv" /> 56 <div id="divProgerssbar" style=" 400px" > 57 <div class="progress-label" style=" 400px" > 58 </div> 59 </div> 60 </form> 61 </body> 62 </html>
