css前端如何把字符串转为数字

html-css014

css前端如何把字符串转为数字,第1张

方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。1. 转换函数：js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。一些示例如下：复制代码 代码如下：parseInt(“1234blue”)//returns 1234parseInt(“0xA”)//returns 10parseInt(“22.5”)//returns 22parseInt(“blue”)//returns NaNparseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：复制代码代码如下：parseInt(“AF”， 16)//returns 175parseInt(“10”， 2)//returns 2parseInt(“10”， 8)//returns 8parseInt(“10”， 10)//returns 10

前言

之前一直在玩three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。

然而，我们可以通过一些小技巧，来创作出一些属于自己的CSS 数学函数，从而实现一些有趣的动画效果。

让我们开始吧！

注意 ：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用

绝对值就是正的还是正的，负的变为正的

可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值

原数减 1 并乘以一半即可

数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来

其实这个也不会实现~不过之前看到过 一篇文章[1] 写到了如何在 CSS 中实现三角函数，在此表示感谢

以下的几个动画特效演示了上面数学函数的作用

创建一排元素，用内部阴影填充，准备好我们的数学函数

这里用了 2 个动画：

地址： Symmetric Line Animation[2]

如何将一维的升成二维？应用网格系统即可

跟上面的动画一模一样

地址： Symmetric Grid Animation[3]

可以换一种动画shuffle （穿梭），会产生另一种奇特的效果

地址： Shuffle Grid Animation[4]

创建7 个不同颜色的（这里直接选了彩虹色）列表，每个列表有 40 个子元素，每个子元素是一个小圆点

让这7 个列表排列在一条线上，且 z 轴上距离错开，设置好基本的 delay

运用上文的三角函数公式，让这些小圆点以余弦的一部分形状进行排列

对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离

跟上面一个套路，计算从中间开始的delay ，再应用到动画上即可

CSS 数学函数能实现的特效远不止于此，希望通过本文能激起大家创作特效的灵感~

[1]在 CSS 中使用三角函数绘制曲线图形及展示动画: https://github.com/chokcoco/iCSS/issues/72

[2]Symmetric Line Animation: https://codepen.io/alphardex/pen/vYmqvpe

[3]Symmetric Grid Animation: https://codepen.io/alphardex/pen/zYwgdZO

[4]Shuffle Grid Animation: https://codepen.io/alphardex/pen/YzVmYaV

[5]Rainbow Sine: https://codepen.io/alphardex/pen/GREKJbL