CSS实现随机模糊效果失败求助：JS生成1-5随机数无法生效

嘿，我帮你揪出代码里的问题啦！你的可变模糊效果没生效，而且没报错，是因为代码里有两个关键的小疏漏，咱们一步步来修复：

1. 随机数函数没有返回值 #

你写的randomNumberFromRange函数里，最后只写了return;，这会让函数返回undefined——也就是说，你调用它之后得到的randomNumber变量其实是空的，自然没法生成有效的模糊值。

把函数改成这样，直接返回计算好的随机数就行：

function randomNumberFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

2. 没有把随机数应用到CSS模糊属性上 #

你的代码写到document.getElementById("test")就断了，缺少最关键的一步：把生成的随机数赋值给元素的模糊样式。而且要注意，CSS的blur()函数需要带单位（比如px），不然样式不会生效。

完整的可运行代码 #

整合之后的代码应该是这样的，我还加了元素存在性判断，避免找不到元素时出现隐性问题：

function randomNumberFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// 生成1-5之间的随机模糊值
const minBlur = 1;
const maxBlur = 5;
const randomBlurValue = randomNumberFromRange(minBlur, maxBlur);

// 获取目标元素并应用模糊效果
const targetElement = document.getElementById("test");
if (targetElement) {
  // 标准写法
  targetElement.style.filter = `blur(${randomBlurValue}px)`;
  // 兼容老版本WebKit内核浏览器（比如旧版Chrome/Safari）
  targetElement.style.webkitFilter = `blur(${randomBlurValue}px)`;
}

这样修改之后，每次运行代码，id="test"的元素就会被应用1到5px之间的随机模糊效果啦！

内容的提问来源于stack exchange，提问作者Smid98