jq插件做圓形進度條，兼容ie7、ie8

原創 kongjiea 2020-02-20 16:02


1、插件名字jQuery-Knob-master

下載地址https://github.com/aterrien/jQuery-Knob

2、常用參數說明：

  1. <script>
  2.  $(function() {
  3.  $(".dial").knob({
  4.  width:100,//寬度
  5.  thickness:0.2,//厚度按百分幾計算
  6.  fgColor:'#f90',//前景色
  7.  //displayInput:false,//不顯示input
  8.  //bgColor:'#000',//背景色
  9.  readOnly:true,//只讀
  10.  //linecap:'round',
  11.  //inputColor:'#f60', //數字的顏色
  12.  });
  13.  });
  14.  </script>



完整案例：










  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  <title>jQuery Knob demo</title>
  5.  <script src="js/jq.js"></script>
  6.  <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  7.  <script src="js/jquery1.knob.js"></script>
  8.  
  9.  <style>
  10.  .box{width:100px;height:100px;position: relative;overflow:hidden;}
  11.  .box canvas{position: absolute;top:0;left:0;width:100px;}
  12.  .box span{line-height:100px;display:inline-block;width:100px;text-align:center;}
  13.  </style>
  14.  </head>
  15.  <body>
  16.  <div class="box">
  17.  <input type="text" value="70" class="dial" >
  18.  <span>70%</span>
  19.  </div>
  20.  <div class="box">
  21.  <input type="text" value="10" class="dial" style="display:none">
  22.  <span>10%</span>
  23.  </div>
  24.  <div class="box">
  25.  <input type="text" value="30" class="dial" style="display:none">
  26.  <span>30%</span>
  27.  </div>
  28.  
  29.  <script>
  30.  $(function() {
  31.  $(".dial").knob({
  32.  width:100,//寬度
  33.  thickness:0.2,//厚度按百分幾計算
  34.  fgColor:'#f90',//前景色
  35.  //displayInput:false,//不顯示input
  36.  //bgColor:'#000',//背景色
  37.  readOnly:true,//只讀
  38.  //linecap:'round',
  39.  //inputColor:'#f60', //數字的顏色
  40.  });
  41.  });
  42.  </script>
  43.  </body>
  44. </html>



解決id7/8下進度在100%的情況下沒有前景色



爲了兼容坑爹的垃圾ie可以在100%進度下單獨設置背景色和前景色爲同一顏色，於是自己又改了一下


  1. $.fn.knob_progress=function(options){
  2.  var defaults={
  3.  width:55
  4.  };
  5.  var opts = $.extend({},defaults,options); 
  6.  $(this).each(function(){
  7.  $this=$(this);
  8.  if($this.val()<100){
  9.  $this.knob({
  10.  width:opts.width,
  11.  thickness:0.15,
  12.  fgColor:'#f90',
  13.  displayInput:false,
  14.  readOnly:true
  15.  });
  16.  }else{
  17.  $this.knob({
  18.  width:opts.width,
  19.  thickness:0.15,
  20.  fgColor:'#f90',
  21.  bgColor:'#f90',
  22.  displayInput:false,
  23.  readOnly:true
  24.  });
  25.  }
  26.  });
  27.  };







完整案例下載地址：



360雲盤。。























kongjiea



發佈了210 篇原創文章 · 獲贊 288 · 訪問量 286萬+





私信

關注

















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師






錯誤一轉件所謂“應該能行”的代碼
錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。
影響：不經過適當錯誤檢查的網站就是對最終用戶耍






原創

2023-10-10 11:11:44









JavaScript 本地存儲






本地存儲簡介
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的
web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲
解決了cookie存儲空間不足的問題（cookie的存儲






OliGit

2020-07-08 12:27:32









微信alert去除默認的提示






原文鏈接：https://blog.csdn.net/qq_32307891/article/details/98953960
微信下alert會多顯示個標題欄，會顯示當前網址。用jQuery下的彈出框，在顯示軟鍵盤情況下點不到“確認”按






felix

2020-07-08 09:14:02









標籤點擊事件後的操作






其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。
<a id="tab1" href="https://www.baidu.com">測試連接</a>
<br/>






just_coming_here

2020-07-08 02:54:27









自用省市級聯及定位






省市二級級聯===========================***///初始化省級聯==============================






iteye_3912

2020-07-08 01:01:43









複製剪貼板功能






複製剪貼板功能
html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri






athrunzero

2020-07-07 22:29:39









@RequestBody 參數是對象數組列表，前後臺傳參






後臺
@Data
public class OrderMap {
private Long id;//訂單標識
private Long pId;//商品標識
private Long sId;//規格id






我爱圆溜溜

2020-07-07 20:22:56









jQuery ajax請求json數據






一、數組類型json數據
html部分：
<table id="table" border="1" cellspacing="0" cellpadding="5">
<tr>
<th>訂單號</th>
<th>購買產品</th






soosgo

2020-07-07 17:29:53









jquery AJAX應用






load(url[,data][,callback])------------->通常用來從WEB服務器上獲取靜態的數據文件
url: string類型 請求HTML頁面的URL地址
data(可選): object 發送至服務器的key






wangbaojun52024029

2020-07-07 16:09:04









JQuery的基礎知識和選擇器






JQUERY官方網站
  http://jquery.com/
jquery-1.4.min.js和jquery-1.4.js的區別？
jquery-1.4.min.js--》如果服務器開啓GZip壓縮後，大小將變爲18KB，主要應用於產






wangbaojun52024029

2020-07-07 15:27:16









jq 全選，全不選 ，反選 獲取選取項的值






<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反選、全選、全不選</title>
<script type="text/javascri






望月归乡

2020-07-07 14:36:15









EasyUI Datagrid 數據網格






網絡示例一：
擴展自 $.fn.panel.defaults。通過 $.fn.datagrid.defaults 重寫默認的 defaults。
數據網格（datagrid）以表格格式顯示數據，併爲選擇、排序、分組和編輯數據提供了豐富的






-水中月-

2020-07-07 14:08:41









如何使用jquery的cloudcoursel






 
如何使用Cloudcoursel，整理如下：
建議和slimbox2同時使用，這樣效果比較好
 
引入JS：
<script type="text/javascript" src="http://ajax.googleapis.com






chensyabc

2020-07-07 11:49:53









jQuery使用手冊(1) - 核心部分






全部內容詳見 http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
 
翻譯整理：Young.J官方網站：http://jquery.com
 
 jQuery是一款






iteye_5568

2020-07-07 11:21:36









3D翻轉






向上
html
<div class="div1">
<img src="images/ad_stock.jpg" alt="">
<div>
山水
</div>
</div>
css
.






fk129

2020-07-07 21:17:15