JavaScript如何通过循环与变量逐步降低图像模糊度？含定时器方案

一、修复当前设置模糊度的错误 #

你的代码存在两个核心问题：

1. 语法错误：设置filter时的模板字符串使用位置错误，导致变量无法正确插入到blur()函数中；
2. setProperty参数错误：blur不是独立的CSS属性，它是filter属性的取值函数，因此要操作的属性名应为filter而非blur。

修复后的check函数示例：

let str = 10;
let blu = "px";
let val = "";
// 补充定义a和b，根据你的实际业务逻辑赋值
let a = 0;
let b = 10;

function check() {
    if(a < b){
        str = str - 6;
        if (str < 0) { str = 0 }
        val = str + blu;
        // 正确使用模板字符串插入变量
        document.getElementById("img1").style.filter = `blur(${val})`;
        
        // 或者用setProperty的正确写法
        // document.getElementById("img1").style.setProperty("filter", `blur(${val})`);
    }
}

二、用定时器实现模糊度逐步递减 #

要实现初始60px模糊度、每秒降低1px、60秒后完全清晰的效果，可使用setInterval定时器，每次更新模糊值直到为0时清除定时器：

// 获取目标元素
const img = document.getElementById("img1");
// 初始模糊度
let blurValue = 60;

// 初始化设置初始模糊效果
img.style.filter = `blur(${blurValue}px)`;

// 设置定时器，每秒执行一次
const timer = setInterval(() => {
    blurValue--;
    // 当模糊度降到0时，清除定时器并强制设置为完全清晰
    if (blurValue <= 0) {
        clearInterval(timer);
        img.style.filter = "blur(0px)";
        return;
    }
    // 更新当前模糊度
    img.style.filter = `blur(${blurValue}px)`;
}, 1000);

说明 #

• 定时器时间间隔设为1000毫秒（即1秒），每次将blurValue减1；
• 当blurValue小于等于0时，清除定时器并强制设置模糊度为0，避免出现负数导致异常；
• 直接操作元素的style.filter属性，通过模板字符串动态拼接模糊值即可完成更新。

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