easyui制作進度條案例demo
阿新 • • 發佈：2018-04-19
var back on() 出錯 error: ror cas rip window
<head> <meta charset="UTF-8"> <title>fe</title> <link rel="stylesheet" type="text/css" href="easyui/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/jinduDemo.css"> <link rel="stylesheet" type="text/css" href="easyui/lodingstyle.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <div class="progressBIgDiv"style="z-index:9999;background: -webkit-gradient(linear, left top, left bottom, from(#28519c00), to(#1b2969));"> <div id="caseViolette"> <div id="cercle"> <div id="cercleCache"></div> </div> <div id="load"> <p>loading</p> </div> <div id="point"></div> </div> <div id="p" class="easyui-progressbar" style="position: absolute;top: 152px;width: 498px;height: 18px;margin: 0px;"></div> <div style="position: absolute;margin:20px 0;top: 152px;"> <a href="#" class="easyui-linkbutton" onclick="start()">測試</a> </div> </div> <script> function start() { var value = $(‘#p‘).progressbar(‘getValue‘); if (value < 100) { value += Math.floor(Math.random() * 10); $(‘#p‘).progressbar(‘setValue‘, value); setTimeout(arguments.callee, 200); } }; </script>
<!--<script type=‘text/javascript‘> var timerId; $(function(){ //每隔0.5秒自動調用方法，實現進度條的實時更新 timerId=window.setInterval(getForm,500); }); function getForm(){ //使用JQuery從後臺獲取JSON格式的數據 $.ajax({ type:"post",//請求方式 url:"getProgressValueByJson",//發送請求地址 timeout:30000,//超時時間：30秒 dataType:"json",//設置返回數據的格式 //請求成功後的回調函數 data為json格式 success:function(data){ if(data.progressValue>=100){ window.clearInterval(timerId); } $(‘#p‘).progressbar(‘setValue‘,data.progressValue); }, //請求出錯的處理 error:function(){ window.clearInterval(timerId); alert("請求出錯"); } }); } </script>-->
</body>
</html>
<head> <meta charset="UTF-8"> <title>fe</title> <link rel="stylesheet" type="text/css" href="easyui/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/jinduDemo.css"> <link rel="stylesheet" type="text/css" href="easyui/lodingstyle.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <div class="progressBIgDiv"style="z-index:9999;background: -webkit-gradient(linear, left top, left bottom, from(#28519c00), to(#1b2969));"> <div id="caseViolette"> <div id="cercle"> <div id="cercleCache"></div> </div> <div id="load"> <p>loading</p> </div> <div id="point"></div> </div> <div id="p" class="easyui-progressbar" style="position: absolute;top: 152px;width: 498px;height: 18px;margin: 0px;"></div> <div style="position: absolute;margin:20px 0;top: 152px;"> <a href="#" class="easyui-linkbutton" onclick="start()">測試</a> </div> </div> <script> function start() { var value = $(‘#p‘).progressbar(‘getValue‘); if (value < 100) { value += Math.floor(Math.random() * 10); $(‘#p‘).progressbar(‘setValue‘, value); setTimeout(arguments.callee, 200); } }; </script>
<!--<script type=‘text/javascript‘> var timerId; $(function(){ //每隔0.5秒自動調用方法，實現進度條的實時更新 timerId=window.setInterval(getForm,500); }); function getForm(){ //使用JQuery從後臺獲取JSON格式的數據 $.ajax({ type:"post",//請求方式 url:"getProgressValueByJson",//發送請求地址 timeout:30000,//超時時間：30秒 dataType:"json",//設置返回數據的格式 //請求成功後的回調函數 data為json格式 success:function(data){ if(data.progressValue>=100){ window.clearInterval(timerId); } $(‘#p‘).progressbar(‘setValue‘,data.progressValue); }, //請求出錯的處理 error:function(){ window.clearInterval(timerId); alert("請求出錯"); } }); } </script>-->
</body>
</html>
easyui制作進度條案例demo