Javascript 嵌套用于同时更新3个变量的循环

我环顾四周，但没有找到解决办法

我想打印出这两者之间的“插值”点：

.card.ani25 {
bottom: 72%;
left:85%;
}

这是：

.card.ani49 {
bottom: 46%;
left: 46%;
}

基本上，我试图同时更新CSS中的所有数值。一次更新一个值是可行的，但在这种情况下没有用处。 到目前为止，我已经尝试过了，好吧，我想到的一切，包括触发一些无限循环，但这是“稳定的”：-）

for（变量i=25；i<50；i++）{
对于（变量j=72；j>=46；j-=2）{
对于（变量k=85；k>=46；k-=3）{
t、 innerHTML='.card.ani'+i+'{'+'
'+'底部：'+j+'%；'+'
'+'左侧：'+k+'%；'+'
'+'}'；
}
}
}

这仅打印出最终迭代，如图所示：

如果我在“innerHTML2”后面加上+=的话，它会爆炸，屏幕会冻结，就像一个无限循环

我知道，最外面的循环先运行，然后下一个内部循环再运行多次，但我从未见过有3个变量的情况。老实说，我也不知道只有2个变量的解决方案

---

如果以前有人问过这一问题，非常抱歉。

问题是通过重新分配

innerHTML

来更改HTML的操作很慢。当您使用

+=

时，它会每次重写HTML，这就是导致它变慢的原因。也就是说它仍然有效，一种更快的方法是使用变量来保存字符串并更新该变量。然后在末尾将

t.innerHTML

的值分配给该字符串：

var t = document.getElementById('target');
var str = "";
for (var i = 25; i < 50; i++){
 for (var j = 72; j >=46; j-=2){
  for (var k = 85; k >=46; k-=3){
      str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
    }
  }
}

t.innerHTML = str;

var t=document.getElementById（'target'）；
var str=“”；
对于（变量i=25；i<50；i++）{
对于（变量j=72；j>=46；j-=2）{
对于（变量k=85；k>=46；k-=3）{
str+='.card.ani'+i+'{'+'
'+'底端：'+j+'%；'+'
'+'左端：'+k+'%；'+'
'+'}'；
}
}
}
t、 innerHTML=str；

---

编辑

澄清后，您似乎只需要一个循环，并在该循环中每次更新变量。在这种情况下，您可以执行以下操作：

var t = document.getElementById('target');
var str = "";
for (var i = 25, j = 72, k = 85; i < 50 && j >=46 && k >=46; i++, j-=2, k-=3){
    str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
}
t.innerHTML = str;

var t=document.getElementById（'target'）；
var str=“”；
对于（变量i=25，j=72，k=85；i<50&&j>=46&&k>=46；i++，j-=2，k-=3）{
str+='.card.ani'+i+'{'+'
'+'底端：'+j+'%；'+'
'+'左端：'+k+'%；'+'
'+'}'；
}
t、 innerHTML=str；

对于For循环中的每个部分，

For（x；y；z）

可以使用逗号来生成许多语句。因此，在第一部分中可以定义3个变量，在最后一部分中更新3个变量。中间部分运行循环，只要满足所有这些条件，当一个条件失败时，循环就会停止

注意：只要其中一个条件为真，您可以使用

|

（或）如果您希望它继续运行

---

问题是，通过重新分配

innerHTML

来更改HTML的操作很慢。当您使用

+=

时，它每次都会重写HTML，这就是导致它变慢的原因。也就是说它仍然有效，一种更快的方法是使用变量保存字符串并更新该变量。然后在最后将

t.innerHTML

的值分配给该字符串：

var t = document.getElementById('target');
var str = "";
for (var i = 25; i < 50; i++){
 for (var j = 72; j >=46; j-=2){
  for (var k = 85; k >=46; k-=3){
      str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
    }
  }
}

t.innerHTML = str;

var t=document.getElementById（'target'）；
var str=“”；
对于（变量i=25；i<50；i++）{
对于（变量j=72；j>=46；j-=2）{
对于（变量k=85；k>=46；k-=3）{
str+='.card.ani'+i+'{'+'
'+'底端：'+j+'%；'+'
'+'左端：'+k+'%；'+'
'+'}'；
}
}
}
t、 innerHTML=str；

---

编辑

澄清后，您似乎只需要一个循环，并在该循环中每次更新变量。在这种情况下，您可以执行以下操作：

var t = document.getElementById('target');
var str = "";
for (var i = 25, j = 72, k = 85; i < 50 && j >=46 && k >=46; i++, j-=2, k-=3){
    str += '.card.ani' + i + ' {' + '<br>' + 'bottom: ' + j + '%;' + '<br>' + 'left: ' + k + '%;' + '<br>' + '}';
}
t.innerHTML = str;

var t=document.getElementById（'target'）；
var str=“”；
对于（变量i=25，j=72，k=85；i<50&&j>=46&&k>=46；i++，j-=2，k-=3）{
str+='.card.ani'+i+'{'+'
'+'底端：'+j+'%；'+'
'+'左端：'+k+'%；'+'
'+'}'；
}
t、 innerHTML=str；

对于For循环中的每个部分，

For（x；y；z）

可以使用逗号来生成许多语句。因此，在第一部分中可以定义3个变量，在最后一部分中更新3个变量。中间部分运行循环，只要满足所有这些条件，当一个条件失败时，循环就会停止

注意：只要其中一个条件为真，您可以使用

|

（或）如果您希望它继续运行

---

我会推广一种完全不同的方法

我认为这是一个不同的范围，需要在平行动画的数量。所以我想有一个函数，知道如何做到这一点

const rangeFns = (...configs) => fn => val => 
  fn.apply(null, configs.map(cfg => (cfg.end - cfg.start) * val + cfg.start))

这将获取范围描述的集合，并返回一个函数，该函数接受一个自定义函数，其中每个范围有一个参数，最后返回一个简单函数，该函数接受0到1之间的数字，返回自定义函数的结果，并为每个范围提供相应参数的插值r、 这有点多，但我认为它很容易使用：

const anim = rangeFns(
  {start: 25, end: 49},
  {start: 72, end: 46},
  {start: 85, end: 46}
)((ani, bottom, left) => `
  .card.ani${Math.round(ani)} {
    bottom: ${bottom}%;
    left: ${left};
  }`
);

如果使用值0、0.25、0.5、0.75和1运行此操作，则会得到以下结果：

.card.ani25 {
  bottom: 72%;
  left: 85;
}

.card.ani31 {
  bottom: 65.5%;
  left: 75.25;
}

.card.ani37 {
  bottom: 59%;
  left: 65.5;
}

.card.ani43 {
  bottom: 52.5%;
  left: 55.75;
}

.card.ani49 {
  bottom: 46%;
  left: 46;
}

（显然，如果需要，您可以将舍入添加到

底部

和

左侧

）

然后，您可以在动画中使用它，方法是传递从开始和完成时间计算的值

在我看来，这样做的好处是更明确，它使范围更具声明性，并使使用结果的函数更简单

此版本可在上获得

更新 一个稍微好一点的版本是使用数组而不是对象（我最初在其中有一些额外的参数，但结果不必要。我没有注意到删除它们可以进行很好的清理）

我觉得这个读起来更好

这个版本也在

上，我想推广一个非常好的版本