#yyds干货盘点#数学函数(中) 阶梯值函数round/mode/rem

读不在三更五鼓，功只怕一曝十寒。看完觉得有收获的，点个赞呗！！！

强调！！！

本文介绍的函数仍然属于实验中的属性，浏览器还不支持。但是相信不久就会支持。

如果暂时不想了解学习，建议收藏，等浏览器支持了再来看！！！

css中有将近102个函数，但是我们所掌握的大概又有多少呢？今天我们先来介绍其中的数学函数，数学函数大概有：

1. 基本算术：calc()
2. 比较函数：min()、max()和clamp()
3. 阶梯值函数：round()、mod()和rem()
4. 三角函数：sin()、cos()、tan()、asin()、acos()、atan()和atan2()
5. 指数函数：pow()、sqrt()、hypot()、log()、exp()
6. 符号相关函数：abs() , sign()

这里是我个人称之为阶梯值函数，官方的叫法是： Stepped Value Functions

语法

round(策略，A,B )

对于负值的处理： round(nearest, A, -B) = round(nearest, A, B) round(up, A, -B) = round(up, A, B) round(down, A, -B) = round(down, A, B) round(to-zero, A, -B) = round(to-zero, A, B)

策略

原来大概是这样的：找到两个倍数x和y，保证Ｂ*x（下B） 小于 A 并且Ｂ*y(上B)大于A,然后根据策略选择对应倍数的值。

为了方便的计算出值来，这里每一个总结出快速计算的公式。

nearest

默认的策略，类似于Math.round() 选择“下 B”和“上 B”中与 A 更接近的一个。如果是平局，请选择“上 B”。

round(nearest, A, B) = Math.round(A/Math.abs(B)) * Math.abs(B)

举例：

round(nearest, 4, 3) = 3 

round(nearest, -4, 3) = -3

这里不用公式，来解释一下： 对于round(nearest, 4, 3)，很简单，先找出倍数，一眼可以看出倍数是1和2，然后根据策略选择3*1离A最近，所以结果就是3. 对于round(nearest, -4, 3)，很简单，先找出倍数，一眼可以看出倍数是-1和-2，然后根据策略选择3*-1离-4最近，所以结果就是-3。

下面的大家可以自己试试看，不行的话，就带入公式计算。

up

选择“上 B” 类似于Math.ceil()

round( up, A, B) = Math.ceil( A/Math.abs(B)) * Math.abs(B)

down

等价于Math.floor() 选择“下B

round(down, A, B) = Math.floor(A/Math.abs(B)) * Math.abs(B)

举例：

round(down, 4, 3) = 3 

round(down, -4, 3) =  (-6)

to-zero

Math.trunc() 选择“下 B”和“上 B”中更接近于 0 的那个。

round(to-zero, A, B) = Math.trunc(A/Math.abs(B)) * Math.abs(B)

并不是取余，是在 A 与 A 之上或之下的 B 的最近整数倍之间的差。并且这个差一定是要位于0至B之间。所以我们一定要清楚这里面的倍数，到底是多少。

这里要注意：差的算法

AB同正负：则A-b

AB异号 ：则A+B

mod(A,B)

举例1-均为正值

mod(140px, 90px)返回50px，倍数是1。 为啥是1不是2呢，如果是2的话，相差40，确实比50小，但是你有没有发现，140-（90*2）返回的是-40，不符合值位于0-B之间。

举例2-均为负值

mod(-140deg, -90deg)返回值-50deg，倍数是1。 为啥是1不是2呢，如果是2的话，相差40，确实比50小，但是你有没有发现，-140-（-90*2）返回的是正40，不符合值在0-B之间。 因为将-90deg * 1添加到-140deg 会产生-50deg

举例3- A正B负值

mod(140deg, - 90deg)返回值-40deg，倍数是2。 这种情况就比较好求了，只要找x使得A+b*x最大负值就可以

举例4- A负B正值

mod(-140deg, 90deg)返回值40deg，倍数是2。 这种情况也是比较好求了，只要找x是的A+b*x是最小的正值就可以

rem函数和mod函数十分相似。 同样也是接收两个参数

rem(A,B)

这里要注意：差的算法也是一致的

AB同正负：则A-b

AB异号 ：则A+B

当A和B同号的情况下，两者是一致的。

但是当AB异号的情况下，不一样，是因为rem取得差值要介于0和（-B），

举例1- A正B负值

mod(140deg, - 90deg)返回值50deg，倍数是1。 这里的B是负值，要取的值要介于0到90，所以倍数是1

举例2- A负B正值

mod(-140deg, 90deg)返回值-50deg，倍数是1。 这里的B是正值，要取得的值要介于0到-90，所以只有倍数1满足。

本来是想这篇就结束数学函数的，但是这三个函数比较难理解，为了大家更好的吸收，就只写这三个函数了。下一篇一定写完数学函数系列。