整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一題計算分數加減表達式的值。加減表達式是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~
如果小伙伴給出內心的結果：
那么小伙伴會被事實狠狠地扇臉：
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 位為有效數字，具體：
符號位決定一個數的正負，指數部分決定數值的大小，小數部分決定數值的精度。
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 標準的編程語言，都會有這個問題，只不過在很多其他語言中已經封裝好了方法來避免精度的問題。
而因為 JavaScript 是一門弱類型的語言，從設計思想上就沒有對浮點數有個嚴格的數據類型，所以精度誤差的問題就顯得格外突出。
到此為止，我們可以看到 JavaScript 在處理數字類型的操作時，可能會產生一些問題。
事實上，工作中還真會有問題！
某天我處理了一個工作表格的計算，然后第二天被告知線上有問題，之后被產品小姐姐問話：
默哀三秒，產生上面的找到探索，最終找到下面的解決方案。
四 解決問題
返回目錄
下面嘗試通過各種方式來解決浮點數計算的問題。
4.1 toFixed()
返回目錄
toFixed() 方法使用定點表示法來格式化一個數值。
語法：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
那么，講到這里，問題來了：
會得到什么呢，你的反應是不是 1.01 ？
然而并不是，結果是：1。
這么說的話，enm...摔！o(╥﹏╥)o
toFixed() 被證明了也不是最保險的解決方式。
4.2 手寫簡易加減乘除
返回目錄
既然 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 是一個用于 JavaScript 和 Node.js 的擴展數學庫。
它具有支持符號計算的靈活表達式解析器，大量內置函數和常量，并提供了集成的解決方案來處理不同的數據類型，例如數字，大數，復數，分數，單位和矩陣。
強大且易于使用。
JavaScript 的任意精度的十進制類型。
一個小型，快速，易于使用的庫，用于任意精度的十進制算術運算。
一個用于任意精度算術的 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: '';
}
未完待續（如果大家有更好的方法來實現，不用圖片，可以麻煩與我交流一下，謝謝！）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
