广告位招租 qq245909083
广告
广告

html5怎么控制进度条

分享时间:2018-01-13 938 热度℃
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <style>
  8.     .jdtbox {
  9.         padding: 10px 0;
  10.     }
  11.      
  12.     .jdt_dbg {
  13.         background: #fce5e5;
  14.         width: 196px;
  15.         height: 18px;
  16.         border-radius: 10px;
  17.         -webkit-border-radius: 10px;
  18.         overflow: hidden;
  19.         border-top: 1px solid #f9d1d1;
  20.     }
  21.      
  22.     .jdt_mbg {
  23.         background: #f12938;
  24.         height: 18px;
  25.         width: 75%;
  26.         height: 20px;
  27.     }
  28. </style>
  29. <script type="text/javascript">
  30.     $(function() {
  31.         $(".jdt_mbg").animate({
  32.             width : "50%",
  33.         }, 1000);
  34.     });
  35. </script>
  36. <body>
  37.     <form action="http://192.168.1.106:8080/app/img/multiUpload" method="post" enctype="multipart/form-data" name="upload_form">
  38.         <label>选择图片文件</label>
  39.         <input name="imgFile" type="file" multiple="multiple" accept="image/gif, image/jpeg" />
  40.         <input name="upload" type="submit" value="上传" />
  41.     </form>
  42.     <div class="jdtbox">
  43.         <div class="jdt_dbg">
  44.             <div class="jdt_mbg" style="width: ${investDetail.percent*100"></div>
  45.         </div>
  46.     </div>
  47. </body>
  48. </html>
复制代码
文章标题:html5怎么控制进度条

本文地址:http://www.aizhanku.com/t35774

本文标签:
返回顶部