整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          javascript分數加減表達式

          javascript分數加減表達式

          一題計算分數加減表達式的值。加減表達式是1/1、1/2、1/3、1/4、1/5這種多分之一,又加又減的狀態,其實還是一個累加的變種,答案是要保留四位小數。

          上一題是按照要求用整數去計算的,這個就投機取巧一下,直接給它寫成一個1.0/1、1.0/2的形式,先加后減,直接寫就行了。這是計算分數加減表達式的值,這些也就都不要了。

          需要從1/1到n分之一,所以four循環,int i等于1,i小于等于n,i加用來表示1.0除以這個分數,然后用ws等于0,累加初始化s加等于它。這樣一來就能保證這個數字是1/1加1/2加1/3加1/4的狀態,求的是1/1減1/2加1/3減1/4,求的是這個。

          所以得知道它的前面是正號還是負號,假設它是正號,那么就可以讓它等于1S,每次加的時候用1乘以它,符號還是正號,計算一次,用它乘以-1就變成負數了,負數再乘以-1就變成正數了,再乘以-1又變成負數了,以此就可以加入加減的運算。

          最后輸出s,保留小數,應該是4位,如果沒記錯,四位提交。今天這個通過還算很順利。

          日常工作計算中,我們如履薄冰,但是 JavaScript 總能給我們這樣那樣的 surprise~

          1. 0.1 + 0.2=?
          2. 1 - 0.9=?

          如果小伙伴給出內心的結果:

          1. 0.1 + 0.2=0.3
          2. 1 - 0.9=0.1

          那么小伙伴會被事實狠狠地扇臉:

          console.log(0.1 + 0.2); // 0.30000000000000004
          console.log(1 - 0.9); // 0.09999999999999998

          為什么會出現這種情況呢?咱們一探究竟!

          三 問題復現

          返回目錄

          下面,我們會通過探討 IEEE 754 標準,以及 JavaScript 加減的計算過程,來復現問題。

          3.1 根源:IEEE 754 標準

          返回目錄

          JavaScript 里面的數字采用 IEEE 754 標準的 64 位雙精度浮點數。該規范定義了浮點數的格式,對于 64 位的浮點數在內存中表示,最高的 1 位是符號為,接著的 11 位是指數,剩下的 52 位為有效數字,具體:

          • 第 0 位:符號位。用 s 表示,0 表示為正數,1 表示為負數;
          • 第 1 - 11 位:存儲指數部分。用 e 表示;
          • 第 12 - 63 位:存儲小數部分(即有效數字)。用 f 表示。



          符號位決定一個數的正負,指數部分決定數值的大小,小數部分決定數值的精度。

          IEEE 754 規定,有效數字第一位默認總是 1,不保存在 64 位浮點數之中。

          也就是說,有效數字總是 1.XX......XX的形式,其中 XX......XX 的部分保存在 64 位浮點數之中,最長可能為 52 位。

          因此,JavaScript 提供的有效數字最長為 53 個二進制位(64 位浮點的后 52 位 + 有效數字第一位的 1)。

          3.2 復現:計算過程

          返回目錄

          通過 JavaScript 計算 0.1 + 0.2 時,會發生什么?

          1、 將 0.1 和 0.2 換成二進制表示:

          0.1 -> 0.0001100110011001...(無限)
          0.2 -> 0.0011001100110011...(無限

          浮點數用二進制表達式是無窮的

          我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。

          2、 因為 IEEE 754 標準的 64 位雙精度浮點數的小數部分最多支持 53 位二進制位,所以兩者相加之后得到二進制為:

          0.0100110011001100110011001100110011001100110011001100

          因為浮點數小數位的限制,這個二進制數字被截斷了,用這個二進制數轉換成十進制,就成了 0.30000000000000004,從而在進行算數計算時產生誤差。

          3.3 擴展:數字安全

          返回目錄

          在看完上面小數的計算不精確后,jsliang 覺得有必要再聊聊整數,因為整數同樣存在一些問題:

          console.log(19571992547450991);
          // 19571992547450990
          
          console.log(19571992547450991===19571992547450994);
          // true

          是不是很驚奇!

          因為 JavaScript 中 Number 類型統一按浮點數處理,整數也不能逃避這個問題:

          // 最大值
          const MaxNumber=Math.pow(2, 53) - 1;
          console.log(MaxNumber); // 9007199254740991
          console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
          
          // 最小值
          const MinNumber=-(Math.pow(2, 53) - 1);
          console.log(MinNumber); // -9007199254740991
          console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

          即整數的安全范圍是: [-9007199254740991, 9007199254740991]。

          超過這個范圍的,就存在被舍去的精度問題。

          當然,這個問題并不僅僅存在于 JavaScript 中,幾乎所有采用了 IEEE-745 標準的編程語言,都會有這個問題,只不過在很多其他語言中已經封裝好了方法來避免精度的問題。

          • PHP Float 浮點型 - Manual
          • Java 您的小數點到哪里去了? - Brian Goetz

          而因為 JavaScript 是一門弱類型的語言,從設計思想上就沒有對浮點數有個嚴格的數據類型,所以精度誤差的問題就顯得格外突出。

          到此為止,我們可以看到 JavaScript 在處理數字類型的操作時,可能會產生一些問題。

          事實上,工作中還真會有問題!

          某天我處理了一個工作表格的計算,然后第二天被告知線上有問題,之后被產品小姐姐問話:

          • 為什么小學生都能做出的小數計算,你們計算機算不了呢?

          默哀三秒,產生上面的找到探索,最終找到下面的解決方案。

          四 解決問題

          返回目錄

          下面嘗試通過各種方式來解決浮點數計算的問題。

          4.1 toFixed()

          返回目錄

          toFixed() 方法使用定點表示法來格式化一個數值。

          • 《toFixed - MDN》

          語法:numObj.toFixed(digits)

          參數:digits。小數點后數字的個數;介于 0 到 20(包括)之間,實現環境可能支持更大范圍。如果忽略該參數,則默認為 0。

          const num=12345.6789;
          
          num.toFixed(); // '12346':進行四舍五入,不包括小數部分。
          num.toFixed(1); // '12345.7':進行四舍五入,保留小數點后 1 個數字。
          num.toFixed(6); // '12345.678900':保留小數點后 6 個數字,長度不足時用 0 填充。
          (1.23e+20).toFixed(2); // 123000000000000000000.00 科學計數法變成正常數字類型

          toFixed() 得出的結果是 String 類型,記得轉換 Number 類型。

          toFixed() 方法使用定點表示法來格式化一個數,會對結果進行四舍五入。

          通過 toFixed() 我們可以解決一些問題:

          原加減乘數:

          console.log(1.0 - 0.9);
          // 0.09999999999999998
          
          console.log(0.3 / 0.1);
          // 2.9999999999999996
          
          console.log(9.7 * 100);
          // 969.9999999999999
          
          console.log(2.22 + 0.1);
          // 2.3200000000000003

          使用 toFixed():

          // 公式:parseFloat((數學表達式).toFixed(digits));
          // toFixed() 精度參數須在 0 與20 之間
          
          parseFloat((1.0 - 0.9).toFixed(10));
          // 0.1 
          
          parseFloat((0.3 / 0.1).toFixed(10));
          // 3 
          
          parseFloat((9.7 * 100).toFixed(10));
          // 970
          
          parseFloat((2.22 + 0.1).toFixed(10));
          // 2.32

          那么,講到這里,問題來了:

          • parseFloat(1.005.toFixed(2))

          會得到什么呢,你的反應是不是 1.01 ?

          然而并不是,結果是:1。

          這么說的話,enm...摔!o(╥﹏╥)o

          toFixed() 被證明了也不是最保險的解決方式。

          4.2 手寫簡易加減乘除

          返回目錄

          既然 JavaScript 自帶的方法不能自救,那么我們只能換個思路:

          • 將 JavaScript 的小數部分轉成字符串進行計算
          /**
           * @name 檢測數據是否超限
           * @param {Number} number 
           */
          const checkSafeNumber=(number)=> {
           if (number > Number.MAX_SAFE_INTEGER || number < Number.MIN_SAFE_INTEGER) {
           console.log(`數字 ${number} 超限,請注意風險!`);
           }
          };
          
          /**
           * @name 修正數據
           * @param {Number} number 需要修正的數字
           * @param {Number} precision 端正的位數
           */
          const revise=(number, precision=12)=> {
           return +parseFloat(number.toPrecision(precision));
          }
          
          /**
           * @name 獲取小數點后面的長度
           * @param {Number} 需要轉換的數字
           */
          const digitLength=(number)=> {
           return (number.toString().split('.')[1] || '').length;
          };
          
          /**
           * @name 將數字的小數點去掉
           * @param {Number} 需要轉換的數字
           */
          const floatToInt=(number)=> {
           return Number(number.toString().replace('.', ''));
          };
          
          /**
           * @name 精度計算乘法
           * @param {Number} arg1 乘數 1
           * @param {Number} arg2 乘數 2
           */
          const multiplication=(arg1, arg2)=> {
           const baseNum=digitLength(arg1) + digitLength(arg2);
           const result=floatToInt(arg1) * floatToInt(arg2);
           checkSafeNumber(result);
           return result / Math.pow(10, baseNum);
           // 整數安全范圍內的兩個整數進行除法是沒問題的
           // 如果有,證明給我看
          };
          
          console.log('------\n乘法:');
          console.log(9.7 * 100); // 969.9999999999999
          console.log(multiplication(9.7, 100)); // 970
          
          console.log(0.01 * 0.07); // 0.0007000000000000001
          console.log(multiplication(0.01, 0.07)); // 0.0007
          
          console.log(1207.41 * 100); // 120741.00000000001
          console.log(multiplication(1207.41, 100)); // 0.0007
          
          /**
           * @name 精度計算加法
           * @description JavaScript 的加法結果存在誤差,兩個浮點數 0.1 + 0.2 !==0.3,使用這方法能去除誤差。
           * @param {Number} arg1 加數 1
           * @param {Number} arg2 加數 2
           * @return arg1 + arg2
           */
          const add=(arg1, arg2)=> {
           const baseNum=Math.pow(10, Math.max(digitLength(arg1), digitLength(arg2)));
           return (multiplication(arg1, baseNum) + multiplication(arg2, baseNum)) / baseNum;
          }
          
          console.log('------\n加法:');
          console.log(1.001 + 0.003); // 1.0039999999999998
          console.log(add(1.001, 0.003)); // 1.004
          
          console.log(3.001 + 0.07); // 3.0709999999999997
          console.log(add(3.001, 0.07)); // 3.071
          
          /**
           * @name 精度計算減法
           * @param {Number} arg1 減數 1
           * @param {Number} arg2 減數 2
           */
          const subtraction=(arg1, arg2)=> {
           const baseNum=Math.pow(10, Math.max(digitLength(arg1), digitLength(arg2)));
           return (multiplication(arg1, baseNum) - multiplication(arg2, baseNum)) / baseNum;
          };
          
          console.log('------\n減法:');
          console.log(0.3 - 0.1); // 0.19999999999999998
          console.log(subtraction(0.3, 0.1)); // 0.2
          
          /**
           * @name 精度計算除法
           * @param {Number} arg1 除數 1
           * @param {Number} arg2 除數 2
           */
          const division=(arg1, arg2)=> {
           const baseNum=Math.pow(10, Math.max(digitLength(arg1), digitLength(arg2)));
           return multiplication(arg1, baseNum) / multiplication(arg2, baseNum);
          };
          
          console.log('------\n除法:');
          console.log(0.3 / 0.1); // 2.9999999999999996
          console.log(division(0.3, 0.1)); // 3
          
          console.log(1.21 / 1.1); // 1.0999999999999999
          console.log(division(1.21, 1.1)); // 1.1
          
          console.log(1.02 / 1.1); // 0.9272727272727272
          console.log(division(1.02, 1.1)); // 數字 9272727272727272 超限,請注意風險!0.9272727272727272
          
          console.log(1207.41 / 100); // 12.074100000000001
          console.log(division(1207.41, 100)); // 12.0741
          
          /**
           * @name 按指定位數四舍五入
           * @param {Number} number 需要取舍的數字
           * @param {Number} ratio 精確到多少位小數
           */
          const round=(number, ratio)=> {
           const baseNum=Math.pow(10, ratio);
           return division(Math.round(multiplication(number, baseNum)), baseNum);
           // Math.round() 進行小數點后一位四舍五入是否有問題,如果有,請證明出來
           // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round
          }
          
          console.log('------\n四舍五入:');
          console.log(0.105.toFixed(2)); // '0.10'
          console.log(round(0.105, 2)); // 0.11
          
          console.log(1.335.toFixed(2)); // '1.33'
          console.log(round(1.335, 2)); // 1.34
          
          console.log(-round(2.5, 0)); // -3
          console.log(-round(20.51, 0)); // -21

          在這份代碼中,我們先通過石錘乘法的計算,通過將數字轉成整數進行計算,從而產生了 安全 的數據。

          JavaScript 整數運算會不會出問題呢?

          乘法計算好后,假設乘法已經沒問題,然后通過乘法推出 加法、減法 以及 除法 這三則運算。

          最后,通過乘法和除法做出四舍五入的規則。

          JavaScript Math.round() 產生的數字會不會有問題呢、

          這樣,我們就搞定了兩個數的加減乘除和四舍五入(保留指定的長度),那么,里面會不會有問題呢?

          如果有,請例舉出來。

          如果沒有,那么你能不能依據上面兩個數的加減乘除,實現三個數甚至多個數的加減乘除?

          五 現成框架

          返回目錄

          這么重要的計算,如果自己寫的話你總會感覺惶惶不安,感覺充滿著危機。

          所以很多時候,我們可以使用大佬們寫好的 JavaScript 計算庫,因為這些問題大佬已經幫我們進行了大量的測試了,大大減少了我們手寫存在的問題,所以我們可以調用別人寫好的類庫。

          下面推薦幾款不錯的類庫:

          • Math.js。

          Math.js 是一個用于 JavaScript 和 Node.js 的擴展數學庫。

          它具有支持符號計算的靈活表達式解析器,大量內置函數和常量,并提供了集成的解決方案來處理不同的數據類型,例如數字,大數,復數,分數,單位和矩陣。

          強大且易于使用。

          • decimal.js

          JavaScript 的任意精度的十進制類型。

          • big.js

          一個小型,快速,易于使用的庫,用于任意精度的十進制算術運算。

          • bignumber.js

          一個用于任意精度算術的 JavaScript 庫。

          最后的最后,值得一提的是:如果對數字的計算非常嚴格,或許你可以將參數丟給后端,讓后端進行計算,再返回給你結果。

          例如涉及到比特幣、商城商品價格等的計算~


          作者:jsliang
          鏈接:https://juejin.im/post/5ddc7fa66fb9a07ad665b1f0

          共樣式

          應該說現在絕大多數公司的項目前端都是一團亂,不僅僅是js寫的沒有任何框架而言,css同樣也是如此,導致項目如果要升級或者說有新的變更維護起來就特別困難。

          最近領導決定花大時間整理一下css樣式,用他的一句話來說就是為后來者造福。

          首先我們在整理樣式之前,必須得有一個自己團隊的規范。

          思考真的很重要,所謂的磨刀不誤砍柴工,事實上也就是說你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再動手,否則就可能做到一半發現這樣不對,然后前面的工夫全白費了,這樣啟不是。。。

          前面說了一堆費話,下面就簡單點來介紹一下我整理的圖標(全部用css來實現的)。

          css沒有繼承、多態等,所以為了write less ,do more就不得不想盡各種方法(我們自己規定凡是公共的、組件級別的樣式全部以u-開頭)。

          我這里因為寫所有標簽的樣式名都是以u-icon開頭,所以寫了如下樣式,這樣的話所有的以u-icon開頭的全部都應用了如下三個樣式,你想如果你有100個u-icon的樣式那就省去了你300行代碼呀!

          [class^="u-icon"]{

          display: inline-block;

          color: #fff;

          vertical-align: middle;

          }

          手機上的切換標簽

          html代碼如下:

          <span class="u-icon-toggle"><i></i></span>

          <span class="u-icon-toggle on"><i></i></span>

          頁面顯示效果如下:

          css樣式代碼:

          /*手機上的切換標簽*/

          .u-icon-toggle{

          position: relative;

          width: 60px;

          height: 30px;

          border-radius: 30px;

          box-shadow: 0 0 0 1px #e5e5e5;

          }

          /*因為這里可能會在父元素上加on 也可能在子元素上加on 所以*/

          .on.u-icon-toggle, .on .u-icon-toggle{

          box-shadow: 0 0 0 1px #4089e8;

          background-color: #4089e8;

          }

          .u-icon-toggle i{

          position: absolute;

          top: 0;

          left: 0;

          width: 30px;

          height: 30px;

          -webkit-box-shadow: 0 0 2px #bbb;

          border-radius: 100%;

          background-color: #fff;

          -webkit-transition: 300ms linear;

          -webkit-transform: translate3d(0,0,0);

          }

          .on.u-icon-toggle i, .on .u-icon-toggle i{

          -webkit-transform: translate3d(30px,0,0);

          }

          各種點(空心點、實心點、藍色點、橙色點)

          html代碼如下:

          <span class="u-icon-pointB cur"></span>

          <span class="u-icon-pointB"></span>

          <span class="u-icon-pointO"></span>

          <span class="u-icon-pointO cur"></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-pointB, .u-icon-pointO{

          width: 6px;

          height: 6px;

          margin: 0 3px;

          border-radius: 100%;/*圓角為100%就實現圓的效果*/

          box-shadow: 0 0 0 1px #6bb5ff;

          }

          /*機票篩選界面橙色點icon*/

          .u-icon-pointO{

          background-color: #fff;

          box-shadow: 0 0 0 1px #ff5d1d;

          }

          /*藍色點icon*/

          .cur.u-icon-pointB,.cur .u-icon-pointB{

          background-color: #6bb5ff;/*如果背景和boder顏色不一致 則為空心圓*/

          }

          .cur.u-icon-pointO,.cur .u-icon-pointO{

          background-color: #ff5d1d;

          }

          箭頭

          html代碼如下:

          <span class="u-icon-arr"></span>

          <span class="u-icon-arr u-icon-arrD"></span>

          <span class="u-icon-arr u-icon-arrU"></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-arr{

          position: absolute;

          top: 50%;

          right: 15px;

          width: 8px;

          height: 8px;

          margin-top: -2px;

          border-style: solid;

          border-width: 2px 2px 0 0;

          border-color: #ababab;

          -webkit-transform-origin: 75% 25%;

          -webkit-transform: rotateZ(45deg);

          -webkit-transition: 100ms ease-in .1s;

          transition: 100ms ease-in .1s;

          }

          /*箭頭朝底 down*/

          .u-icon-arrD{

          -webkit-transform: rotateZ(135deg);

          }

          /*箭頭朝上 up*/

          .u-icon-arrU{

          -webkit-transform: rotateZ(-45deg);

          }

          大小不一的radio

          html代碼如下:

          <span class="u-icon-radioLB on"></span>

          <span class="u-icon-radioLB off"></span>

          <span class="u-icon-radioSB"></span>

          <span class="u-icon-radioLO off"></span>

          <span class="u-icon-radioLO on"></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-radioLB, .u-icon-radioLO,.u-icon-radioSB{

          position: relative;

          width: 24px;

          height: 24px;

          border-radius: 24px;

          -webkit-border-radius: 24px;

          }

          .u-icon-radioSB{

          width: 18px;

          height: 18px;

          border-radius: 18px;

          }

          .u-icon-radioLO{

          right: 1px;

          box-shadow: 0 0 1px #aaa;

          background-color: #f8f8f8;

          }

          .on .u-icon-radioLB,.on.u-icon-radioLB,.u-icon-radioSB{

          background: #4288E3;

          }

          .u-icon-radioLB.off {

          background-color: #ECECEC;

          }

          .u-icon-radioLB.off::after {

          border-color: #999;

          }

          .u-icon-radioLO::before{

          position: absolute;

          left: -15px;

          top: -10px;

          width: 50px;

          height: 40px;

          content: " ";

          }

          .on.u-icon-radioLO,.on .u-icon-radioLO{

          width: 24px;

          height: 24px;

          border-radius: 24px;

          box-shadow: none;

          background-color: #ff5d1d;

          }

          .on.u-icon-radioLO::after,.on .u-icon-radioLO::after{

          position: absolute;

          top: 3px;

          right: 3px;

          width: 14px;

          height: 7px;

          border-left: 2px solid #fff;

          border-bottom: 2px solid #fff;

          -webkit-transform: rotate(-45deg) translate(-3px,1px);

          transform: rotate(-45deg) translate(-3px,1px);

          content: " ";

          }

          .u-icon-radioLB::after,.u-icon-radioSB::after{

          position: absolute;

          top: 4px;

          left: 8px;

          width: 6px;

          height: 10px;

          border-style: solid;

          border-color: #fff;

          border-width: 0 2px 2px 0;

          -webkit-transform: rotateZ(45deg);

          content: "";

          }

          .u-icon-radioSB::after{

          top: 3px;

          left: 6px;

          width: 4px;

          height: 8px;

          }

          詳情(也就是三橫線)

          html代碼如下:

          <span class="u-icon-detail"><i></i></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-detail{

          width: 12px;

          height: 10px;

          padding: 19px 10px;

          }

          .u-icon-detail i{

          display: block;

          position: relative;

          width: 12px;

          height: 2px;

          background-color: #ffa124;

          }

          .u-icon-detail i:before{

          position: absolute;

          top: 4px;

          width: 12px;

          height: 2px;

          background-color: #ffa124;

          content: '';

          }

          .u-icon-detail i:after{

          position: absolute;

          top: 8px;

          width: 7px;

          height: 2px;

          background-color: #ffa124;

          content: '';

          }

          各種刪除按鈕(不用圖標只能css來實現)

          html代碼如下:

          <span class="u-icon-radioDelete"></span>

          <span class="u-icon-deleteToggle Orange">

          <span class="u-icon-trash"></span>刪除 </span>

          <span class="u-icon-deleteToggle Blue">

          <span class="u-icon-grayTrash"></span>刪除 </span>

          <span class="u-icon-del"></span>

          <span class="u-icon-del on"></span>

          <span class='u-icon-sel more'>搜索更多</span>

          <span class='u-icon-sel on'>搜索更多</span>

          <span class='u-icon-delete'><i></i></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-sel{

          position: relative;

          -webkit-box-sizing: border-box;

          width: 32%;

          height: 32px;

          line-height: 30px;

          margin-bottom: 4px;

          border: 1px solid #a4afc6;

          border-radius: 3px;

          color: #a4afc6;

          text-align: center;

          text-overflow: ellipsis;

          overflow: hidden;

          white-space: nowrap;

          }

          .u-icon-sel.on{

          overflow: hidden;

          border-color: #ff5d1d;

          color: #000;

          }

          .u-icon-sel.on:before{

          position: absolute;

          right: 0;

          bottom: 0;

          width: 18px;

          height: 18px;

          background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat -23px -152px/150px 240px;

          content: '';

          }

          .u-icon-sel.more{

          color: #6daeee;

          }

          .u-icon-deleteToggle{

          width: 75px;

          height: 45px;

          line-height: 45px;

          text-align: center;

          }

          .u-icon-deleteToggle.Blue{

          background-color: #3e74b9;

          }

          .u-icon-deleteToggle.Orange{

          background-color: #ff5d1d;

          }

          /*白色垃圾桶、灰色垃圾桶圖標*/

          .u-icon-trash,.u-icon-grayTrash{

          background: url(images/common-graphic37.png) no-repeat 0 0/150px 240px;

          }

          .u-icon-trash{

          background-position: 0 -84px;

          width: 16px;

          height: 18px;

          }

          .u-icon-grayTrash {

          display: inline-block;

          width: 12px;

          height: 18px;

          margin-right: 8px;

          vertical-align: -2px;

          background-position: -3px -178px;

          }

          /*不用任何圖標實現刪除icon效果*/

          .u-icon-delete{

          position: absolute;

          bottom: 5px;

          right: 0;

          width: 40px;

          height: 40px;

          }

          /*給before偽類設置一個默認背景色 設置content*/

          .u-icon-delete:before{

          position: absolute;

          top: 10px;

          left: 10px;

          width: 20px;

          height: 20px;

          border-radius: 20px;

          background-color: #8e8e93;

          content: '';

          }

          /*給after偽類 -webkit-transform: rotate(-45deg);旋轉 background-color: #e1e2e4;設置X的一邊的顏色*/

          .u-icon-delete:after{

          position: absolute;

          top: 19px;

          left: 14px;

          width: 12px;

          height: 2px;

          -webkit-transform: rotate(-45deg);

          background-color: #e1e2e4;

          content: '';

          }

          /* -webkit-transform: rotate(45deg); 運用的特別巧秒*/

          .u-icon-delete i{

          position: absolute;

          top: 19px;

          left: 14px;

          width: 12px;

          height: 2px;

          background-color: #e1e2e4;

          -webkit-transform: rotate(45deg);

          }

          /*橙色背景中間一白色橫杠的刪除icon */

          .u-icon-del{

          position: relative;

          width: 24px;

          height: 24px;

          border: 1px solid #ff5d1d;

          -webkit-border-radius: 24px;

          border-radius: 24px;

          -webkit-transition: 300ms ease-in-out;

          transition: 300ms ease-in-out;

          background-color: #ff5d1d;

          }

          .u-icon-del.on,.on .u-icon-del{

          -webkit-transform: rotateZ(90deg);

          }

          /*這里的background-color: #fff;和 content: "";實現白色橫杠*/

          .u-icon-del::after{

          position: absolute;

          top: 10px;

          left: 4px;

          width: 16px;

          height: 4px;

          background-color: #fff;

          content: "";

          }

          .u-icon-radioDelete{

          position: relative;

          width: 24px;

          height: 24px;

          border: 1px solid #8AADD8;

          -webkit-border-radius: 24px;

          border-radius: 24px;

          -webkit-transition: 300ms ease-in-out;

          transition: 300ms ease-in-out;

          }

          .u-icon-radioDelete::after{

          position: absolute;

          top: 11px;

          left: 4px;

          width: 16px;

          height: 2px;

          background-color: #8AADD8;

          color: #8AADD8;

          content: "";

          }

          .u-icon-radioDelete.on,.on .u-icon-radioDelete{

          -webkit-transform: rotateZ(90deg);

          -ms-transform: rotateZ(90deg);

          }

          加加減減圖標

          html代碼如下:

          <i class='u-icon-plus on'></i>

          <i class='u-icon-minus on'></i>

          <i class='u-icon-plus '></i>

          <i class='u-icon-minus '></i>

          <span class="u-icon-addS"></span>

          <span class="u-icon-addB"></span>

          頁面顯示效果如下:

          css樣式代碼:

          /*加減標簽*//*加標簽icon*/

          .u-icon-addS, .u-icon-addB{

          width: 60px;

          height: 40px;

          }

          /*加的大icon*/

          .u-icon-addB{ position: relative;

          top: 0;

          right: 0;

          }

          /*加的小icon*/

          .u-icon-addS{

          position: relative;

          color: #3B8FF8;

          }

          .u-icon-addS::before,.u-icon-addS::after, .u-icon-addB::before,.u-icon-addB::after{

          position: absolute;

          top: 20px;

          left: 25px;

          width: 12px;

          content: "";

          }

          .u-icon-addB::before, .u-icon-addB::after{

          border-top: 1px solid #fff;

          }

          .u-icon-addS::before,.u-icon-addS::after{

          border-top: 2px solid #3B8FF8;

          }

          .u-icon-addB::after,.u-icon-addS::after{

          -webkit-transform: rotateZ(90deg);

          transform: rotateZ(90deg);

          }

          /*加、減按鈕*/

          .u-icon-plus, .u-icon-minus{

          position: relative;

          width: 30px;

          height: 3px;

          background-color: #a9b3c9;

          box-shadow: 0 1px 1px #959bab inset;

          border-radius: 3px;

          }

          .u-icon-plus.on, .u-icon-minus.on,.on.u-icon-plus::before,

          .on .u-icon-plus,.on .u-icon-minus ,.on .u-icon-plus ::before{

          background-color: #6daeee;

          box-shadow: 0 1px 1px #6a9aca inset;

          }

          .u-icon-plus::before{

          position: absolute;

          left: 13px;

          width: 3px;

          height: 30px;

          border-radius: 3px;

          box-shadow: 1px 0 1px #959bab inset;

          background-color: #a9b3c9;

          -webkit-transform: translate(0,-13.5px);

          transform: translate(0,-13.5px);

          text-align: center;

          content: "";

          }

          一行被選中狀態圖標

          html代碼如下:

          <span class="u-icon-checkTitle"></span>

          頁面顯示效果如下:

          css樣式代碼:

          .u-icon-checkTitle{

          position: absolute;

          top: 9px;

          right: 13px;

          width: 16px;

          height: 16px;

          border-radius: 100%;

          background: #fff;

          content: '';

          }

          .u-icon-checkTitle::after{

          position: absolute;

          top: 2px;

          right: 5px;

          width: 4px;

          height: 8px;

          border-width: 0 2px 2px 0;

          border-color: #ffa124;

          border-style: solid;

          -webkit-transform: rotate(45deg);

          content: '';

          }

          未完待續(如果大家有更好的方法來實現,不用圖片,可以麻煩與我交流一下,謝謝!)


          主站蜘蛛池模板: 性色A码一区二区三区天美传媒| 久久久久99人妻一区二区三区| 亚洲欧美国产国产综合一区| 日韩精品人妻一区二区三区四区| 伊人色综合网一区二区三区| 国产SUV精品一区二区88| 国产在线精品一区二区在线看| 欧洲精品码一区二区三区免费看 | 日韩中文字幕精品免费一区| 精品人妻无码一区二区色欲产成人 | 人妻免费一区二区三区最新| 99精品一区二区免费视频| 亚洲日韩中文字幕无码一区| 无码精品蜜桃一区二区三区WW| 嫩B人妻精品一区二区三区| 精品国产鲁一鲁一区二区| 国模无码一区二区三区不卡| 亚洲Av高清一区二区三区| 国产免费私拍一区二区三区| 亚洲av不卡一区二区三区| 色综合久久一区二区三区| 国精品无码一区二区三区在线蜜臀| 国产精品视频一区二区三区| 国产精品 一区 在线| 国产日本亚洲一区二区三区| 影院无码人妻精品一区二区| 精品成人乱色一区二区| 精品一区二区三区高清免费观看 | 久久国产精品免费一区| 亚洲乱码一区二区三区国产精品 | 久久精品国产亚洲一区二区三区| 久久久老熟女一区二区三区| 亚洲av无码天堂一区二区三区 | 爱爱帝国亚洲一区二区三区| 蜜桃传媒视频麻豆第一区| 日韩精品午夜视频一区二区三区| 日本一区二区三区在线观看| 无码人妻一区二区三区精品视频 | 熟妇人妻一区二区三区四区| 国产成人精品无码一区二区老年人| 日韩在线不卡免费视频一区|