CSS中用math.random()实现伪随机

2024-01-28 13:09:14

CSS中如何实现伪随机？

通常，我们所说的“随机”是指结果不可预测。但对于计算机而言，一切都是确定的，没有真正的随机。我们只能通过数学算法模拟出看似随机的效果，称为“伪随机”。

在CSS中，实现伪随机并不容易，因为它不是一门编程语言。我们必须充分利用CSS本身的特点和技巧，才能达到目的。

这里介绍一种使用math.random()函数实现伪随机的方法。math.random()函数会生成一个0到1之间的随机小数，我们利用这个小数作为种子，然后根据一定的算法计算出伪随机值。

例如，我们要生成一个伪随机颜色，我们可以先使用math.random()生成一个0到1之间的随机小数，然后将其作为种子，利用以下算法计算伪随机颜色：

/* 利用math.random()函数实现伪随机颜色 */
function randomColor() {
  // 生成0到1之间的随机小数
  let r = Math.random();
  let g = Math.random();
  let b = Math.random();
  // 将小数转换为0到255之间的整数
  r = Math.floor(r * 255);
  g = Math.floor(g * 255);
  b = Math.floor(b * 255);
  // 返回随机颜色
  return `rgb(${r}, ${g}, ${b})`;
}

/* 使用随机颜色填充元素的背景 */
document.body.style.backgroundColor = randomColor();

这个算法会生成一个介于0到255之间的随机整数，然后将其作为RGB颜色的各个分量。这样生成的随机颜色是均匀分布的，没有规律可循。

除了伪随机颜色，我们还可以使用伪随机来生成伪随机图案。例如，我们可以使用伪随机来生成一个随机的波浪图案：

/* 利用math.random()函数实现伪随机波浪图案 */
function randomWave() {
  // 生成0到1之间的随机小数
  let x = Math.random();
  let y = Math.random();
  // 将小数转换为0到360之间的整数
  x = Math.floor(x * 360);
  y = Math.floor(y * 360);
  // 返回随机波浪图案
  return `url(data:image/svg+xml;base64,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 50 C ${x} ${y} 50 100 100 50" fill="none" stroke="black" stroke-width="1"/></svg>`)})`;
}

/* 使用随机波浪图案作为元素的背景 */
document.body.style.backgroundImage = randomWave();