标签搜索
隐藏侧边栏

CSS数学函数- 阶梯值函数round() mode() rem()

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 39 阅读 / 2,119 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

强调!!!

本文介绍的函数仍然属于实验中的属性,浏览器还不支持。但是相信不久就会支持。> 如果暂时不想了解学习,建议收藏,等浏览器支持了再来看!!!

前言

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

image.png

阶梯值函数-round()

语法

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,保证Bx(下B) 小于 A 并且By(上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)

阶梯值函数-mod()

并不是取余,是在 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()

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满足。

0

评论区