javascript分?jǐn)?shù)加減表達(dá)式

一題計(jì)算分?jǐn)?shù)加減表達(dá)式的值。加減表達(dá)式是1/1、1/2、1/3、1/4、1/5這種多分之一，又加又減的狀態(tài)，其實(shí)還是一個(gè)累加的變種，答案是要保留四位小數(shù)。

上一題是按照要求用整數(shù)去計(jì)算的，這個(gè)就投機(jī)取巧一下，直接給它寫(xiě)成一個(gè)1.0/1、1.0/2的形式，先加后減，直接寫(xiě)就行了。這是計(jì)算分?jǐn)?shù)加減表達(dá)式的值，這些也就都不要了。

需要從1/1到n分之一，所以four循環(huán)，int i等于1，i小于等于n，i加用來(lái)表示1.0除以這個(gè)分?jǐn)?shù)，然后用ws等于0，累加初始化s加等于它。這樣一來(lái)就能保證這個(gè)數(shù)字是1/1加1/2加1/3加1/4的狀態(tài)，求的是1/1減1/2加1/3減1/4，求的是這個(gè)。

所以得知道它的前面是正號(hào)還是負(fù)號(hào)，假設(shè)它是正號(hào)，那么就可以讓它等于1S，每次加的時(shí)候用1乘以它，符號(hào)還是正號(hào)，計(jì)算一次，用它乘以-1就變成負(fù)數(shù)了，負(fù)數(shù)再乘以-1就變成正數(shù)了，再乘以-1又變成負(fù)數(shù)了，以此就可以加入加減的運(yùn)算。

最后輸出s，保留小數(shù)，應(yīng)該是4位，如果沒(méi)記錯(cuò)，四位提交。今天這個(gè)通過(guò)還算很順利。

日常工作計(jì)算中，我們?nèi)缏谋”?JavaScript 總能給我們這樣那樣的 surprise~

0.1 + 0.2=？
1 - 0.9=？

如果小伙伴給出內(nèi)心的結(jié)果：

0.1 + 0.2=0.3
1 - 0.9=0.1

那么小伙伴會(huì)被事實(shí)狠狠地扇臉：

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

為什么會(huì)出現(xiàn)這種情況呢？咱們一探究竟！

三問(wèn)題復(fù)現(xiàn)

返回目錄

下面，我們會(huì)通過(guò)探討 IEEE 754 標(biāo)準(zhǔn)，以及 JavaScript 加減的計(jì)算過(guò)程，來(lái)復(fù)現(xiàn)問(wèn)題。

3.1 根源：IEEE 754 標(biāo)準(zhǔn)

返回目錄

JavaScript 里面的數(shù)字采用 IEEE 754 標(biāo)準(zhǔn)的 64 位雙精度浮點(diǎn)數(shù)。該規(guī)范定義了浮點(diǎn)數(shù)的格式，對(duì)于 64 位的浮點(diǎn)數(shù)在內(nèi)存中表示，最高的 1 位是符號(hào)為，接著的 11 位是指數(shù)，剩下的 52 位為有效數(shù)字，具體：

第 0 位：符號(hào)位。用 s 表示，0 表示為正數(shù)，1 表示為負(fù)數(shù)；
第 1 - 11 位：存儲(chǔ)指數(shù)部分。用 e 表示；
第 12 - 63 位：存儲(chǔ)小數(shù)部分（即有效數(shù)字）。用 f 表示。

符號(hào)位決定一個(gè)數(shù)的正負(fù)，指數(shù)部分決定數(shù)值的大小，小數(shù)部分決定數(shù)值的精度。

IEEE 754 規(guī)定，有效數(shù)字第一位默認(rèn)總是 1，不保存在 64 位浮點(diǎn)數(shù)之中。

也就是說(shuō)，有效數(shù)字總是 1.XX......XX的形式，其中 XX......XX 的部分保存在 64 位浮點(diǎn)數(shù)之中，最長(zhǎng)可能為 52 位。

因此，JavaScript 提供的有效數(shù)字最長(zhǎng)為 53 個(gè)二進(jìn)制位（64 位浮點(diǎn)的后 52 位 + 有效數(shù)字第一位的 1）。

3.2 復(fù)現(xiàn)：計(jì)算過(guò)程

返回目錄

通過(guò) JavaScript 計(jì)算 0.1 + 0.2 時(shí)，會(huì)發(fā)生什么？

1、將 0.1 和 0.2 換成二進(jìn)制表示：

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

浮點(diǎn)數(shù)用二進(jìn)制表達(dá)式是無(wú)窮的

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

2、因?yàn)?IEEE 754 標(biāo)準(zhǔn)的 64 位雙精度浮點(diǎn)數(shù)的小數(shù)部分最多支持 53 位二進(jìn)制位，所以?xún)烧呦嗉又蟮玫蕉M(jìn)制為：

0.0100110011001100110011001100110011001100110011001100

因?yàn)楦↑c(diǎn)數(shù)小數(shù)位的限制，這個(gè)二進(jìn)制數(shù)字被截?cái)嗔?，用這個(gè)二進(jìn)制數(shù)轉(zhuǎn)換成十進(jìn)制，就成了 0.30000000000000004，從而在進(jìn)行算數(shù)計(jì)算時(shí)產(chǎn)生誤差。

3.3 擴(kuò)展：數(shù)字安全

返回目錄

在看完上面小數(shù)的計(jì)算不精確后，jsliang 覺(jué)得有必要再聊聊整數(shù)，因?yàn)檎麛?shù)同樣存在一些問(wèn)題：

console.log(19571992547450991);
// 19571992547450990

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

是不是很驚奇！

因?yàn)?JavaScript 中 Number 類(lèi)型統(tǒng)一按浮點(diǎn)數(shù)處理，整數(shù)也不能逃避這個(gè)問(wèn)題：

// 最大值
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

即整數(shù)的安全范圍是： [-9007199254740991, 9007199254740991]。

超過(guò)這個(gè)范圍的，就存在被舍去的精度問(wèn)題。

當(dāng)然，這個(gè)問(wèn)題并不僅僅存在于 JavaScript 中，幾乎所有采用了 IEEE-745 標(biāo)準(zhǔn)的編程語(yǔ)言，都會(huì)有這個(gè)問(wèn)題，只不過(guò)在很多其他語(yǔ)言中已經(jīng)封裝好了方法來(lái)避免精度的問(wèn)題。

PHP Float 浮點(diǎn)型 - Manual
Java 您的小數(shù)點(diǎn)到哪里去了？ - Brian Goetz

而因?yàn)?JavaScript 是一門(mén)弱類(lèi)型的語(yǔ)言，從設(shè)計(jì)思想上就沒(méi)有對(duì)浮點(diǎn)數(shù)有個(gè)嚴(yán)格的數(shù)據(jù)類(lèi)型，所以精度誤差的問(wèn)題就顯得格外突出。

到此為止，我們可以看到 JavaScript 在處理數(shù)字類(lèi)型的操作時(shí)，可能會(huì)產(chǎn)生一些問(wèn)題。

事實(shí)上，工作中還真會(huì)有問(wèn)題！

某天我處理了一個(gè)工作表格的計(jì)算，然后第二天被告知線(xiàn)上有問(wèn)題，之后被產(chǎn)品小姐姐問(wèn)話(huà)：

為什么小學(xué)生都能做出的小數(shù)計(jì)算，你們計(jì)算機(jī)算不了呢？

默哀三秒，產(chǎn)生上面的找到探索，最終找到下面的解決方案。

四解決問(wèn)題

返回目錄

下面嘗試通過(guò)各種方式來(lái)解決浮點(diǎn)數(shù)計(jì)算的問(wèn)題。

4.1 toFixed()

返回目錄

toFixed() 方法使用定點(diǎn)表示法來(lái)格式化一個(gè)數(shù)值。

《toFixed - MDN》

語(yǔ)法：numObj.toFixed(digits)

參數(shù)：digits。小數(shù)點(diǎn)后數(shù)字的個(gè)數(shù)；介于 0 到 20（包括）之間，實(shí)現(xiàn)環(huán)境可能支持更大范圍。如果忽略該參數(shù)，則默認(rèn)為 0。

const num=12345.6789;

num.toFixed(); // '12346'：進(jìn)行四舍五入，不包括小數(shù)部分。
num.toFixed(1); // '12345.7'：進(jìn)行四舍五入，保留小數(shù)點(diǎn)后 1 個(gè)數(shù)字。
num.toFixed(6); // '12345.678900'：保留小數(shù)點(diǎn)后 6 個(gè)數(shù)字，長(zhǎng)度不足時(shí)用 0 填充。
(1.23e+20).toFixed(2); // 123000000000000000000.00 科學(xué)計(jì)數(shù)法變成正常數(shù)字類(lèi)型

toFixed() 得出的結(jié)果是 String 類(lèi)型，記得轉(zhuǎn)換 Number 類(lèi)型。

toFixed() 方法使用定點(diǎn)表示法來(lái)格式化一個(gè)數(shù)，會(huì)對(duì)結(jié)果進(jìn)行四舍五入。

通過(guò) toFixed() 我們可以解決一些問(wèn)題：

原加減乘數(shù)：

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((數(shù)學(xué)表達(dá)式).toFixed(digits));
// toFixed() 精度參數(shù)須在 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

那么，講到這里，問(wèn)題來(lái)了：

parseFloat(1.005.toFixed(2))

會(huì)得到什么呢，你的反應(yīng)是不是 1.01 ？

然而并不是，結(jié)果是：1。

這么說(shuō)的話(huà)，enm...摔！o(╥﹏╥)o

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

4.2 手寫(xiě)簡(jiǎn)易加減乘除

返回目錄

既然 JavaScript 自帶的方法不能自救，那么我們只能換個(gè)思路：

將 JavaScript 的小數(shù)部分轉(zhuǎn)成字符串進(jìn)行計(jì)算

/**
 * @name 檢測(cè)數(shù)據(jù)是否超限
 * @param {Number} number 
 */
const checkSafeNumber=(number)=> {
 if (number > Number.MAX_SAFE_INTEGER || number < Number.MIN_SAFE_INTEGER) {
 console.log(`數(shù)字 ${number} 超限，請(qǐng)注意風(fēng)險(xiǎn)！`);
 }
};

/**
 * @name 修正數(shù)據(jù)
 * @param {Number} number 需要修正的數(shù)字
 * @param {Number} precision 端正的位數(shù)
 */
const revise=(number, precision=12)=> {
 return +parseFloat(number.toPrecision(precision));
}

/**
 * @name 獲取小數(shù)點(diǎn)后面的長(zhǎng)度
 * @param {Number} 需要轉(zhuǎn)換的數(shù)字
 */
const digitLength=(number)=> {
 return (number.toString().split('.')[1] || '').length;
};

/**
 * @name 將數(shù)字的小數(shù)點(diǎn)去掉
 * @param {Number} 需要轉(zhuǎn)換的數(shù)字
 */
const floatToInt=(number)=> {
 return Number(number.toString().replace('.', ''));
};

/**
 * @name 精度計(jì)算乘法
 * @param {Number} arg1 乘數(shù) 1
 * @param {Number} arg2 乘數(shù) 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);
 // 整數(shù)安全范圍內(nèi)的兩個(gè)整數(shù)進(jìn)行除法是沒(méi)問(wèn)題的
 // 如果有，證明給我看
};

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 精度計(jì)算加法
 * @description JavaScript 的加法結(jié)果存在誤差，兩個(gè)浮點(diǎn)數(shù) 0.1 + 0.2 !==0.3，使用這方法能去除誤差。
 * @param {Number} arg1 加數(shù) 1
 * @param {Number} arg2 加數(shù) 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 精度計(jì)算減法
 * @param {Number} arg1 減數(shù) 1
 * @param {Number} arg2 減數(shù) 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 精度計(jì)算除法
 * @param {Number} arg1 除數(shù) 1
 * @param {Number} arg2 除數(shù) 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)); // 數(shù)字 9272727272727272 超限，請(qǐng)注意風(fēng)險(xiǎn)！0.9272727272727272

console.log(1207.41 / 100); // 12.074100000000001
console.log(division(1207.41, 100)); // 12.0741

/**
 * @name 按指定位數(shù)四舍五入
 * @param {Number} number 需要取舍的數(shù)字
 * @param {Number} ratio 精確到多少位小數(shù)
 */
const round=(number, ratio)=> {
 const baseNum=Math.pow(10, ratio);
 return division(Math.round(multiplication(number, baseNum)), baseNum);
 // Math.round() 進(jìn)行小數(shù)點(diǎn)后一位四舍五入是否有問(wèn)題，如果有，請(qǐng)證明出來(lái)
 // 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

在這份代碼中，我們先通過(guò)石錘乘法的計(jì)算，通過(guò)將數(shù)字轉(zhuǎn)成整數(shù)進(jìn)行計(jì)算，從而產(chǎn)生了安全的數(shù)據(jù)。

JavaScript 整數(shù)運(yùn)算會(huì)不會(huì)出問(wèn)題呢？

乘法計(jì)算好后，假設(shè)乘法已經(jīng)沒(méi)問(wèn)題，然后通過(guò)乘法推出加法、減法以及除法這三則運(yùn)算。

最后，通過(guò)乘法和除法做出四舍五入的規(guī)則。

JavaScript Math.round() 產(chǎn)生的數(shù)字會(huì)不會(huì)有問(wèn)題呢、

這樣，我們就搞定了兩個(gè)數(shù)的加減乘除和四舍五入（保留指定的長(zhǎng)度），那么，里面會(huì)不會(huì)有問(wèn)題呢？

如果有，請(qǐng)例舉出來(lái)。

如果沒(méi)有，那么你能不能依據(jù)上面兩個(gè)數(shù)的加減乘除，實(shí)現(xiàn)三個(gè)數(shù)甚至多個(gè)數(shù)的加減乘除？

五現(xiàn)成框架

返回目錄

這么重要的計(jì)算，如果自己寫(xiě)的話(huà)你總會(huì)感覺(jué)惶惶不安，感覺(jué)充滿(mǎn)著危機(jī)。

所以很多時(shí)候，我們可以使用大佬們寫(xiě)好的 JavaScript 計(jì)算庫(kù)，因?yàn)檫@些問(wèn)題大佬已經(jīng)幫我們進(jìn)行了大量的測(cè)試了，大大減少了我們手寫(xiě)存在的問(wèn)題，所以我們可以調(diào)用別人寫(xiě)好的類(lèi)庫(kù)。

下面推薦幾款不錯(cuò)的類(lèi)庫(kù)：

Math.js。

Math.js 是一個(gè)用于 JavaScript 和 Node.js 的擴(kuò)展數(shù)學(xué)庫(kù)。

它具有支持符號(hào)計(jì)算的靈活表達(dá)式解析器，大量?jī)?nèi)置函數(shù)和常量，并提供了集成的解決方案來(lái)處理不同的數(shù)據(jù)類(lèi)型，例如數(shù)字，大數(shù)，復(fù)數(shù)，分?jǐn)?shù)，單位和矩陣。

強(qiáng)大且易于使用。

decimal.js

JavaScript 的任意精度的十進(jìn)制類(lèi)型。

big.js

一個(gè)小型，快速，易于使用的庫(kù)，用于任意精度的十進(jìn)制算術(shù)運(yùn)算。

bignumber.js

一個(gè)用于任意精度算術(shù)的 JavaScript 庫(kù)。

最后的最后，值得一提的是：如果對(duì)數(shù)字的計(jì)算非常嚴(yán)格，或許你可以將參數(shù)丟給后端，讓后端進(jìn)行計(jì)算，再返回給你結(jié)果。

例如涉及到比特幣、商城商品價(jià)格等的計(jì)算~

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

共樣式

應(yīng)該說(shuō)現(xiàn)在絕大多數(shù)公司的項(xiàng)目前端都是一團(tuán)亂，不僅僅是js寫(xiě)的沒(méi)有任何框架而言，css同樣也是如此，導(dǎo)致項(xiàng)目如果要升級(jí)或者說(shuō)有新的變更維護(hù)起來(lái)就特別困難。

最近領(lǐng)導(dǎo)決定花大時(shí)間整理一下css樣式，用他的一句話(huà)來(lái)說(shuō)就是為后來(lái)者造福。

首先我們?cè)谡順邮街?，必須得有一個(gè)自己團(tuán)隊(duì)的規(guī)范。

思考真的很重要，所謂的磨刀不誤砍柴工，事實(shí)上也就是說(shuō)你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再動(dòng)手，否則就可能做到一半發(fā)現(xiàn)這樣不對(duì)，然后前面的工夫全白費(fèi)了，這樣啟不是。。。

前面說(shuō)了一堆費(fèi)話(huà)，下面就簡(jiǎn)單點(diǎn)來(lái)介紹一下我整理的圖標(biāo)（全部用css來(lái)實(shí)現(xiàn)的）。

css沒(méi)有繼承、多態(tài)等，所以為了write less ,do more就不得不想盡各種方法（我們自己規(guī)定凡是公共的、組件級(jí)別的樣式全部以u(píng)-開(kāi)頭）。

我這里因?yàn)閷?xiě)所有標(biāo)簽的樣式名都是以u(píng)-icon開(kāi)頭，所以寫(xiě)了如下樣式，這樣的話(huà)所有的以u(píng)-icon開(kāi)頭的全部都應(yīng)用了如下三個(gè)樣式，你想如果你有100個(gè)u-icon的樣式那就省去了你300行代碼呀！

[class^="u-icon"]{

display: inline-block;

color: #fff;

vertical-align: middle;

}

手機(jī)上的切換標(biāo)簽

html代碼如下：

頁(yè)面顯示效果如下：

css樣式代碼：

/*手機(jī)上的切換標(biāo)簽*/

.u-icon-toggle{

position: relative;

width: 60px;

height: 30px;

border-radius: 30px;

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

}

/*因?yàn)檫@里可能會(huì)在父元素上加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);

}

各種點(diǎn)（空心點(diǎn)、實(shí)心點(diǎn)、藍(lán)色點(diǎn)、橙色點(diǎn)）

html代碼如下：

頁(yè)面顯示效果如下：

css樣式代碼：

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

width: 6px;

height: 6px;

margin: 0 3px;

border-radius: 100%;/*圓角為100%就實(shí)現(xiàn)圓的效果*/

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

}

/*機(jī)票篩選界面橙色點(diǎn)icon*/

.u-icon-pointO{

background-color: #fff;

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

}

/*藍(lán)色點(diǎn)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代碼如下：

頁(yè)面顯示效果如下：

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代碼如下：

頁(yè)面顯示效果如下：

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;

}

詳情（也就是三橫線(xiàn)）

html代碼如下：

頁(yè)面顯示效果如下：

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: '';

}

各種刪除按鈕（不用圖標(biāo)只能css來(lái)實(shí)現(xiàn)）

html代碼如下：

刪除

刪除

搜索更多

搜索更多

頁(yè)面顯示效果如下：

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;

}

/*白色垃圾桶、灰色垃圾桶圖標(biāo)*/

.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;

}

/*不用任何圖標(biāo)實(shí)現(xiàn)刪除icon效果*/

.u-icon-delete{

position: absolute;

bottom: 5px;

right: 0;

width: 40px;

height: 40px;

}

/*給before偽類(lèi)設(shè)置一個(gè)默認(rèn)背景色設(shè)置content*/

.u-icon-delete:before{

position: absolute;

top: 10px;

left: 10px;

width: 20px;

height: 20px;

border-radius: 20px;

background-color: #8e8e93;

content: '';

}

/*給after偽類(lèi) -webkit-transform: rotate(-45deg);旋轉(zhuǎn) background-color: #e1e2e4;設(shè)置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); 運(yùn)用的特別巧秒*/

.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: "";實(shí)現(xiàn)白色橫杠*/

.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);

}

加加減減圖標(biāo)

html代碼如下：

頁(yè)面顯示效果如下：

css樣式代碼：

/*加減標(biāo)簽*//*加標(biāo)簽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: "";

}

一行被選中狀態(tài)圖標(biāo)

html代碼如下：

頁(yè)面顯示效果如下：

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: '';

}

未完待續(xù)（如果大家有更好的方法來(lái)實(shí)現(xiàn)，不用圖片，可以麻煩與我交流一下，謝謝?。?/strong>

在線(xiàn)咨詢(xún)

上一篇：web防止表單多次提交的方法
下一篇：Apache POI使用詳解(看完這篇基本上能應(yīng)付工

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

推薦閱讀

使用w3af掃描網(wǎng)站漏洞

Java實(shí)現(xiàn)圖形驗(yàn)證碼程序

一文帶你搞懂JS實(shí)現(xiàn)壓縮圖片

HTML 符號(hào)

HTML ul li 橫排居中排列的...

HTML DOM Reset 對(duì)象

HTML 表格

Html5有什么優(yōu)勢(shì)？

css面試題總匯

HTML添加背景音樂(lè)(embed、audio)

HTML常用代碼集合，背完這些基...

全套的HTML5教程，帶你入門(mén)并深...

學(xué)習(xí)Web前端開(kāi)發(fā)難嗎？并沒(méi)有你...

IT兄弟連 HTML5教程 CSS3揭秘...

Html5教程：為什么CSS這么難學(xué)？

html5開(kāi)發(fā)培訓(xùn)薪資多少

Google Chrome 工程師：JavaScri

15 個(gè) CSS 隱藏屬性

Anaconda 推出 PyScript：在 HTM

如何零基礎(chǔ)學(xué)習(xí)VBA—HtmlDlgSafeHelp

整合營(yíng)銷(xiāo)服務(wù)商

javascript分?jǐn)?shù)加減表達(dá)式

您的項(xiàng)目需求