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~

0.1 + 0.2=？
1 - 0.9=？

如果小伙伴给出内心的结果：

0.1 + 0.2=0.3
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代码如下：

页面显示效果如下：

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

页面显示效果如下：

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

页面显示效果如下：

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

页面显示效果如下：

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

页面显示效果如下：

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

删除

删除

搜索更多

搜索更多

页面显示效果如下：

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

页面显示效果如下：

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

页面显示效果如下：

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

}

未完待续（如果大家有更好的方法来实现，不用图片，可以麻烦与我交流一下，谢谢！）

在线咨询

上一篇：web防止表单多次提交的方法
下一篇：Apache POI使用详解(看完这篇基本上能应付工

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript分数加减表达式

您的项目需求