在HTML中振荡图像过滤器的值

Question

我正在尝试将饱和滤波器值从1更改为5，然后再更改回1。我猜getElementById中变量的实现是完全错误的。怎么了？

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;
function PerformCalc() {
if (up == true && value <= ceiling) {
value += increment
if (value == ceiling) {
up = false;
}
} else {
up = false
value -= increment;
if (value == 1) {
up = true;
}
}
function changesaturation(value) {
document.getElementById("s1").style.webkitFilter = "saturate(" value")";
}
}
setInterval(PerformCalc, 100);

<img src="image.jpg" id="s1" width="100%" height="1200px">

Answer 1

嵌套函数"变化饱和"；似乎没有必要
此外，JavaScript中的字符串串联可以使用Addition(+(运算符来实现
除此之外，您的代码似乎还能正常工作。

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;
function PerformCalc() {
if (up == true && value <= ceiling) {
value += increment
if (value == ceiling) {
up = false;
}
} else {
up = false
value -= increment;
if (value == 1) {
up = true;
}
}
document.getElementById("s1").style.webkitFilter = "saturate(" + value + ")";
}
setInterval(PerformCalc, 100);

#s1 {
width:250px;
}

<img src="https://i.picsum.photos/id/1069/536/354.jpg?hmac=ywdE7hQ_NM4wnxJshRkXBsy-MHlGRylyqlb51WToAQA" id="s1">

正如Temani Afif所提到的，CSS动画也可以达到这种效果
这里有一个例子：

@-webkit-keyframes pulseSaturate {
0% {
-webkit-filter: saturate(1);
}
50% {
-webkit-filter: saturate(5);
}
100% {
-webkit-filter: saturate(1);
}
}
@keyframes pulseSaturate {
0% {
filter: saturate(1);
}
50% {
filter: saturate(5);
}
100% {
filter: saturate(1);
}
}
#s1 {
width: 250px;
-webkit-animation: pulseSaturate 800ms steps(4, end) infinite;
animation: pulseSaturate 800ms steps(4, end) infinite;
}

<img src="https://i.picsum.photos/id/1069/536/354.jpg?hmac=ywdE7hQ_NM4wnxJshRkXBsy-MHlGRylyqlb51WToAQA" id="s1">

根据shouldiprefix-webkit"；建议在发布本文时使用供应商前缀。