一題計算分數加減表達式的值。加減表達式是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小時內與您取得聯系。