Javascript 向上/向下计数阵列动画

我想在按下左箭头和右箭头时创建一个带有阵列的向上和向下计数动画

我有3个数组，每个箭头将链接到一个ID

var KEY = {
  LEFT: 37,
  RIGHT:  39
}

$(function(){
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:
        // Arrays +1

      break;
      case  KEY.LEFT:
        // Arrays -1

      break;
    }
  });
});

var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

演示：

我真的不知道如何处理它

我该怎么做

---

非常感谢你的帮助

一旦掌握了数组和索引的窍门，就不难了。看一看:

引入一个新变量：

计数器

每次用户向左或向右点击时，它都会得到一个新值。 测试索引是否在数组中

在函数末尾，使用

数组[索引]

反映计数器

var键={
左：37，
右：39
}
var计数器=0；
$（函数（）{
$（文档）.keydown（函数（e）{
开关（e.which）{
case KEY.RIGHT：
//阵列+1
asiel.length==计数器？计数器=asiel.length-1:空；
计数器++；
打破
case KEY.LEFT：
//阵列-1
计数器--；
0>计数器？计数器=0:null；
打破
}
$（“#asiel”）.text（asiel[计数器]）；
$（“#纳雷齐格尔”）.text（纳雷齐格尔[计数器]；
$（“#总计”）.text（总计[计数器]；
});
});
var asiel=[0,200,300,900,1100,2000]；
var nareiziger=[0,200,300,900,1100,2000]；
var总计=[0025909000110023000]

马尔特2015
+ 0
艾尔斯特亚西尔佐克斯酒店
+ 127
纳雷齐格斯
29.301
2013年1月以来叙利亚移民总数
这是一把工作小提琴。只需用position定义一个新变量，并上下计数即可


var键={
左：37，
右：39
}
var asiel=[0,200,300,900,1100,2000]；
var nareiziger=[0,200,300,900,1100,2000]；
var总计=[0025909000110023000]；
$（函数（）{
设pos=0
changeVal（）
函数changeVal（）{
$（“#asiel”）.html（asiel[pos]）
$（“#总计”）.html（总计[pos]）
$（“#nareiziger”）.html（nareiziger[pos]）
}
$（文档）.keydown（函数（e）{
开关（e.which）{
case KEY.RIGHT：
位置<总长度？位置+=1
：pos=总长度
changeVal（）
//阵列+1
打破
case KEY.LEFT：
位置>0？
位置-=1
：pos=0
changeVal（）
//阵列-1
打破
}
});
});
这看起来很棒，但也有可能让它像真的计数一样。例如，现在它从0跳到200。不知道你在说什么。第一项是0，下一项是数组中的200，使用向上计数动画，我正在寻找类似的内容：但它必须向上计数数组中放置的数字。效果很好！但也有可能让这些数字看起来像是一个计数。例如：是的，这是可能的，但这将需要大量的编码，我不是受雇的。这个网站只是为了解决编码问题。
var KEY = {
  LEFT: 37,
  RIGHT:  39
}
var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

$(function(){
  let pos = 0
  changeVal()
  function changeVal(){
  $("#asiel").html(asiel[pos])
  $("#total").html(total[pos])
  $("#nareiziger").html(nareiziger[pos])
  }
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:

        pos < total.length ? pos += 1
        : pos = total.length

        changeVal()
        // Arrays +1

      break;
      case  KEY.LEFT:
        pos > 0 ?
        pos -= 1
        : pos = 0

        changeVal()
        // Arrays -1

      break;
    }
  });
});